sessionStorage是会话级本地存储,数据仅限当前标签页,关闭即清除,不跨标签页共享;容量约5MB,只存字符串,需JSON序列化对象,不可存储敏感信息。

sessionStorage 是浏览器提供的会话级本地存储机制,数据只在当前标签页内有效,关闭该标签页即自动清除,不跨页面、不跨标签页共享。
生命周期完全绑定当前标签页
sessionStorage 的存续时间由“页面会话”决定,不是按分钟或小时计时,而是与标签页的打开-关闭周期严格同步:
- 页面刷新、前进后退、甚至崩溃恢复(如浏览器意外退出后重新打开该标签页),数据都保留
- 只要标签页没关闭,哪怕切换到其他网站再返回,数据仍在
- 关闭方式包括:点击 ×、Ctrl+W、右键关闭、拖出窗口后关闭、浏览器进程结束——任一操作都会清空对应 sessionStorage
- 新开一个相同 URL 的标签页,会创建全新的、完全隔离的 sessionStorage,与原标签页互不影响
跨页面访问受限是设计原则,不是 bug
sessionStorage 天然不支持跨页面访问,这是由它的作用域模型决定的:
- 作用域单位是“单个标签页 + 同源”,即协议、域名、端口三者完全一致才构成同源
- 同一域名下两个不同路径的页面(如 /login 和 /dashboard)可共用同一个 sessionStorage(因为同源且同标签页)
- 但两个标签页同时打开 /login,它们的 sessionStorage 互相不可见、不可读写
- iframe 中的页面若与父页同源,可访问父页的 sessionStorage;若不同源,则被同源策略拦截
存对象必须手动序列化
sessionStorage 只接受字符串作为 value,直接存对象会变成 "[object Object]",取出来也无法还原:
- 存入前用 JSON.stringify() 转为字符串,例如:
sessionStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 取出后用 JSON.parse() 解析,例如:
const user = JSON.parse(sessionStorage.getItem('user')) - 注意:函数、undefined、Symbol、Date 对象、RegExp 等无法被 JSON 安全序列化,需提前处理或换用其他方案
安全与容量需主动管理
它虽不自动发送到服务端,但并非绝对安全,且容量有限:
- 防范 XSS:攻击者可通过注入脚本读取 sessionStorage 中的数据,因此切勿存放 token、密码、身份证号等敏感信息
- 容量上限约 5MB(各浏览器略有浮动),超限会抛出 QuotaExceededError,建议写入前估算体积或分片存储
- 避免高频读写:频繁 setItem/getItem 可能影响性能,尤其在复杂表单或实时协作场景中,可考虑节流或缓存中间状态
- 定期清理:业务逻辑结束时(如表单提交成功、流程退出),主动调用 removeItem() 或 clear() 释放空间

















