sessionStorage 不自动跨页同步,需开发者手动存取实现跳转状态复用:跳转前序列化数据存入,跳转后解析恢复并可选清除;须同源、不存敏感信息、生命周期限于标签页。

sessionStorage 本身不自动跨页同步,它的数据只在当前标签页内有效。所谓“跳转后复用”,其实是靠开发者在跳转前主动存、跳转后主动取,形成一次手动中转。
跳转前:把数据存进 sessionStorage
在离开当前页(比如点击“详情”按钮)的瞬间,把需要保留的状态序列化后存入:
- 筛选条件、页码、表单草稿等,先整理成对象,再用 JSON.stringify() 转为字符串
- 使用语义化 key 存储,例如 sessionStorage.setItem('user-list-filter', JSON.stringify(filterObj))
- 避免直接存 DOM 元素、函数或 Date 对象——它们无法被正确序列化
跳转后:从 sessionStorage 读取并恢复
目标页面加载完成后(如 Vue 的 mounted、React 的 useEffect 或原生 DOMContentLoaded),立即尝试读取:
- 用 sessionStorage.getItem('key') 获取字符串,再用 JSON.parse() 还原为对象
- 若返回 null,说明是首次访问,按默认值初始化;否则用读到的数据填充 UI 或发起带参请求
- 读取后可选择性调用 sessionStorage.removeItem('key') 清理,防止状态残留(比如搜索后进入详情,返回时应保留筛选,但切换菜单时应清空)
关键注意事项
几个容易出错但影响功能的点:
- 同源限制:两个页面必须协议、域名、端口完全一致,否则读不到数据
- 生命周期清晰:关闭标签页即清空,刷新或前进/后退均保留——适合“本次会话内”的临时延续
- 不存敏感信息:哪怕加密了,也不建议放 token、密码、身份证号等;优先走服务端 session 或短期 JWT
- 不要依赖自动行为:它不会像后端 session 那样自动透传,所有存取都得你写代码触发
这个机制不复杂但容易忽略细节,用对了能显著提升后台系统的操作连贯性。


















