会清空。关闭对应标签页后，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、没有延迟、不给机会。
