17370845950

会清空。关闭对应标签页后，sessionStorage 数据立即被浏览器销毁且无法恢复，其生命周期严格绑定单个浏览上下文；页面刷新、同源路由跳转等操作均不触发清空。

sessionStorage 关闭标签页后数据是否清空

会清空。只要关闭了对应标签页（或窗口），sessionStorage 中的所有数据立即被浏览器销毁，且无法恢复。

这是 sessionStorage 的核心设计原则：生命周期严格绑定到「单个浏览上下文」，即一个标签页（tab）或一个独立窗口（window）。新开的标签页即使访问同一 URL，也拥有完全隔离的 sessionStorage 实例。

sessionStorage 和 localStorage 的关键区别

两者都存储字符串，但作用域和生命周期完全不同：

• sessionStorage：仅在当前标签页存活；页面刷新保留，关闭标签页即清空；不同标签页互不共享
• localStorage：持久化存储，除非手动调用 localStorage.removeItem() 或清除浏览器数据，否则一直存在；同源下所有标签页共享同一份数据
• 二者均受同源策略限制（协议 + 域名 + 端口），跨域无法读写

哪些操作不会清空 sessionStorage

这些常见行为不影响 sessionStorage 数据的存续：

• 页面刷新（F5 或 location.reload()）—— 数据完整保留
• 通过 history.pushState() 或 history.replaceState() 改变 URL（如单页应用路由跳转）
• 在当前标签页内执行 window.open() 新开子窗口，子窗口有自己独立的 sessionStorage，但父窗口不受影响

容易误判的典型场景

开发者常因以下情况误以为 sessionStorage “丢失”或“共享”，实际是机制理解偏差：

• 在 Chrome 隐身模式下测试：部分版本的隐身窗口会在关闭整个隐身窗口（而非单个标签页）时才清空，行为一致但观察窗口粒度不同
• 使用 location.href = 'xxx' 跳转到同域其他页面：新页面拥有全新、空的 sessionStorage，旧页面的数据不会自动传递
• 服务端重定向（如 302）后页面重新加载：等价于一次新页面导航，原 sessionStorage 不延续
• Vue/React 应用中频繁 router.push()：只要没离开当前标签页，sessionStorage 始终有效；但若路由配置了 target="_blank"，则新开标签页无历史数据

const token = 'abc123';
sessionStorage.setItem('authToken', token);
// 页面刷新后仍可取到
console.log(sessionStorage.getItem('authToken')); // 'abc123'
// 但一旦关闭该标签页，再打开同一页面，此处返回 null

真正需要跨标签页保持状态时，不要依赖 sessionStorage，改用 localStorage + storage 事件监听，或服务端 session 配合 JWT 等方案。浏览器对 sessionStorage 的清理非常彻底，没有 hook、没有延迟、不给机会。