sessionStorage在会话结束时自动清空，但清除时机因浏览器而异：Chrome/Edge需同源标签页全关，Firefox随进程退出，Safari则同源页关闭即清；存取需JSON序列化、区分大小写、iframe隔离、新开页独立实例；登出、表单中断等场景建议手动清除。
sessionStorage 本身就会在关闭页面（准确说是“会话结束”）后自动清空，不需要额外操作——但它的“关闭”逻辑比表面看起来更精细，用对了才真正可靠。
理解“关闭页面后清空”的真实含义
sessionStorage 的生命周期绑定的是**单个标签页的会话**，不是你点一下 × 就立刻消失。关键看浏览器是否释放了该标签页的运行上下文：
- Chrome / Edge：所有同源标签页都关闭后，才清空；关掉其中一个，其他同源页的数据照常存在
- Firefox：只要浏览器进程退出（比如全部窗口关闭或任务管理器中进程终止），立即清空所有 sessionStorage
- Safari（含 iOS）：同源标签页一关闭就清空；无痕模式下直接禁用，调用会抛 SecurityError
- 刷新、history 跳转、崩溃恢复都不会触发清除——这些只是重载，标签页还在
正确存取数据，避免常见失效假象
数据“没清空”或“看似丢了”，往往不是机制问题，而是用法偏差：
- 存对象或数组时，必须用 JSON.stringify() 转成字符串；读取时用 JSON.parse() 还原，否则会报错或得到 null
- key 区分大小写，
sessionStorage.getItem('Token')和getItem('token')是两个键 - iframe 中的 sessionStorage 完全隔离——父页和子 iframe 即使同源也无法互相访问
- 新开一个相同 URL 的标签页，会生成全新 sessionStorage 实例，和原页毫无关系
需要主动清空的几种典型场景
虽然关闭后自动清空，但有些情况建议手动干预：
立即学习“前端免费学习笔记（深入）”；
- 用户登出时：
sessionStorage.clear()或sessionStorage.removeItem('authToken')，防止敏感信息滞留在当前标签页 - 多步流程中途退出（如放弃填写表单）：
sessionStorage.removeItem('formStep2Data')，避免残留中间状态干扰下次使用 - 调试阶段快速重置：
sessionStorage.clear()在控制台执行，比反复开关标签页更高效 - 注意：
beforeunload里调用setItem()不可靠，尤其移动端可能被中断，不建议依赖它做最后保存
别把它当登录态或跨页状态管理工具
sessionStorage 不适合替代真正的身份凭证或用户偏好设置：
- 它不能跨标签页共享，所以新打开一个页面就拿不到原页的登录信息
- 它不发送到服务器，无法用于服务端鉴权
- React/Vue 组件不会自动同步 sessionStorage 变化，需在组件初始化时手动读取并注入 state
- 若需带过期时间的临时存储，可封装一层带时间戳的 set/get（如 TimedSessionStorage），但本质仍是模拟，非浏览器原生支持
