17370845950

sessionStorage是仅限当前标签页的会话级字符串键值存储，关闭标签页即清空；存取需手动JSON序列化/反序列化，刷新保留但

新开同URL标签页无数据，不响应自身修改，适用于表单草稿等临时场景，非安全存储。

sessionStorage 是浏览器提供的会话级键值对存储机制，只在当前标签页生命周期内有效，关闭该标签页后数据自动清空。它不是“临时变量”，也不是“内存缓存”，而是一个有明确作用域、隔离性与序列化要求的持久化 API。

怎么存和取数据？注意类型转换

sessionStorage 只接受字符串作为值，传对象、数字、布尔值都会被 .toString() 强转，导致信息丢失：

// ❌ 错误：直接存对象 → 存进去的是 "[object Object]"
sessionStorage.setItem('user', { name: 'Alice' });
// ✅ 正确：手动序列化 + 反序列化
sessionStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }));
const user = JSON.parse(sessionStorage.getItem('user') || '{}');

• getItem() 找不到 key 时返回 null，不是 undefined，所以 || '{}' 或 ?? '{}' 是安全兜底
• 数字、布尔等基础类型也建议统一走 JSON.stringify，避免隐式转换歧义（比如 0 → ''）

为什么刷新页面还在，但新开同个 URL 的标签页就没了？

这是 sessionStorage 最常被误解的一点：

• ✅ 同一标签页内刷新、前进/后退、Ctrl+Shift+T 恢复关闭的页面 → 数据保留
• ❌ 新开一个标签页（哪怕地址栏完全一样）→ 创建全新会话，sessionStorage 隔离且为空
• ⚠️ window.open() 打开的子窗口会复制初始值，但之后各自独立修改，互不通知

这和 Cookie 的“会话 Cookie”行为不同——后者是按域名+协议共享的，而 sessionStorage 是严格按渲染进程实例隔离的。

监听别人改了 sessionStorage？别指望它

storage 事件不会响应当前页面自身的修改，只在同源的其他标签页调用 setItem/removeItem 时触发：

window.addEventListener('storage', (e) => {
  console.log('其他标签页改了：', e.key, e.newValue);
});

• 当前页改了 sessionStorage，自己收不到这个事件
• 中的同源页面修改，能触发父页的事件（前提是同源）
• 如果你靠这个做跨标签页通信，得换方案（如 BroadcastChannel）

哪些场景真适合用？哪些其实不该用？

✅ 推荐场景：

• 多步骤表单草稿（用户意外关页后回来还能续填）
• 单页应用中暂存路由参数或筛选条件（比如搜索页跳详情页再返回）
• 临时令牌（如 OAuth 临时 code），配合显式过期检查（它自己不支持 TTL）

❌ 不该用的：

• 用户长期偏好设置（该用 localStorage）
• 需要跨标签页同步的状态（sessionStorage 天然做不到）
• 敏感凭证（如原始密码、长期 token）——它对 JS 完全可见，且无加密机制

最易被忽略的一点：sessionStorage 不是安全边界。只要页面能执行 JS，数据就能被读走。它解决的是“生命周期问题”，不是“保密问题”。