sessionStorage在单标签页内同源页面切换时数据完全保留，刷新、前进/后退、地址栏回车及history.pushState()等操作均不丢失；关闭标签页是唯一清除时机，且需注意手动读取并赋值才能触发Vue/React响应式更新。
sessionStorage 在单窗口下不同页面切换时，数据完全保持一致——只要不关闭标签页，所有同源页面间的数据都原样保留。
刷新、前进/后退、地址栏回车都不影响 sessionStorage
这些操作只是重建 DOM 和 JS 执行环境，并未终止当前浏览会话。无论是 location.reload()、按 F5、在地址栏按回车，还是通过 history.pushState() 或 history.replaceState() 导航，sessionStorage 的内容都不会丢失。
- 表单草稿、筛选条件、折叠状态等临时信息能自动恢复
- Vue/React 组件需手动读取（
sessionStorage.getItem('key')）并赋值给响应式变量，否则 UI 不会自动更新 - 注意判断返回值：
getItem()返回 null（不是undefined），用!== null判断更稳妥
同源页面跳转时数据始终可用
只要 URL 改变但仍在同一协议、域名和端口下（即同源），sessionStorage 就是共享的。比如从 /login 跳到 /dashboard，或从 /list?id=1 切换到 /detail?id=2，数据依然存在。
- SPA 中路由切换（如 Vue Router、React Router）完全适用此机制
- iframe 内的页面拥有独立的 sessionStorage，父页面无法直接访问
- 通过
window.open()或<a target="_blank">打开的新标签页会复制初始数据，但之后彼此隔离
关闭标签页是唯一清除时机
只有当用户主动关闭该标签页，或浏览器进程被彻底终止（如任务管理器中结束 Chrome 进程），sessionStorage 才会被清空。
- 隐私模式（无痕窗口）下也遵循相同规则，只是生命周期可能更短
- “关掉再重开还看到数据”通常是因为浏览器开启了会话恢复，或后台仍有 Service Worker 活跃，导致进程未真正退出
- 验证是否清空：关闭所有同源标签页 → 查看任务管理器确认浏览器进程已退出 → 重新打开页面检查
getItem()是否返回null
常见误判来源
很多开发者以为数据“恢复了”是框架或库的功劳，其实大概率是自己写了初始化逻辑：
- 页面加载时调用了
sessionStorage.getItem()并还原状态 - 把数据错存到了 localStorage，误以为是 sessionStorage 的行为
- 服务端 session 保持登录态，掩盖了前端存储的实际表现
