sessionStorage是仅限当前标签页的会话级存储，关闭标签页即清除，支持字符串存取（对象需JSON序列化），不跨标签页共享、不参与网络请求，适用于表单草稿等临时数据。
sessionStorage 是浏览器提供的一种会话级本地存储机制，数据仅在当前浏览器标签页（或窗口）的生命周期内有效，关闭该标签页后自动清除。它不跨标签页共享，也不受页面刷新影响，适合临时保存与单次会话强相关的数据，比如表单草稿、导航状态、临时筛选条件等。
sessionStorage 的核心特性
理解它的行为边界是正确使用的前提：
- 作用域限定于当前标签页：同一域名下，新开一个标签页（即使 URL 完全相同）会获得独立的 sessionStorage 实例，彼此不可见。
- 页面刷新或重新加载不丢失：F5、地址栏回车、history.pushState 跳转等操作均保留数据。
- 关闭标签页即销毁：包括点击关闭按钮、Ctrl+W、浏览器崩溃重启（只要该标签页已关闭）——数据彻底消失，无法恢复。
- 仅支持字符串值：setItem() 只接受字符串作为 value；如需存对象，必须先用 JSON.stringify() 序列化，读取时再 JSON.parse() 还原。
常用操作与安全写法
直接调用 sessionStorage 的方法简单，但容易忽略类型和异常处理：
-
存数据：使用 try-catch 包裹，防止因存储空间满（QUOTA_EXCEEDED_ERR）或非字符串值导致静默失败。不要直接传对象：
sessionStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'})); -
取数据：始终检查返回值是否为 null，并做 JSON 解析容错：
const userStr = sessionStorage.getItem('user');<br> const user = userStr ? JSON.parse(userStr) : null; - 删数据：用 removeItem('key') 删除指定项；clear() 清空全部（谨慎使用，尤其在多模块共用时）。
与 localStorage 和 cookie 的关键区别
选错存储方式是常见问题：
立即学习“Java免费学习笔记（深入）”；
- vs localStorage：后者无会话限制，数据长期存在（除非手动清除），适合用户偏好、主题设置等持久化需求；sessionStorage 更轻量、更隐私，不参与网络请求。
- vs cookie：cookie 会随每次 HTTP 请求自动发送到服务器，有大小限制（通常 4KB）、需要关注 HttpOnly/Secure 等安全属性；sessionStorage 完全在前端，容量更大（通常 5–10MB），且不参与通信。
- 注意：sessionStorage 不是“登录会话”的替代品。服务端 session（如 Express 的 req.session）由服务器维护，用于身份认证；前端 sessionStorage 存的 token 或用户信息只是客户端缓存，不能代替服务端鉴权逻辑。
实用场景与避坑提醒
典型用法要匹配其生命周期特性：
- 适用场景：多步骤表单中途暂存、SPA 中路由跳转前的滚动位置、搜索页的筛选参数（返回时恢复）、未提交的编辑内容草稿。
- 不适用场景：需要跨标签页同步的状态（改用 BroadcastChannel + sessionStorage 组合，或换 localStorage + 监听 storage 事件）；敏感凭证（如原始密码、长期有效的 access_token —— 应优先走 httpOnly cookie 或内存变量）。
- 调试技巧：Chrome DevTools → Application → Storage → Session Storage，可实时查看、编辑、清空；也可在 Console 中直接输入 sessionStorage 查看所有键值。
