SessionStorage 是 HTML5 提供的单标签页临时存储机制，数据以字符串形式存于当前 tab，关闭即清除，容量 5–10 MB，支持 setItem/getItem 等操作，适用于表单草稿、导航状态等场景。
SessionStorage 是 HTML5 提供的客户端存储机制，它的核心特点是：数据仅在当前浏览器标签页（tab）中有效，关闭该标签页后自动清除，且不同标签页之间完全隔离。这正好满足“仅当前标签页有效”的临时数据管理需求。
SessionStorage 的基本特性
理解它才能用对：
- 作用域严格限定在**单个浏览上下文**（即一个 tab 或 iframe），新开同网址的标签页也是独立的 session
- 数据以字符串形式存储（key-value），所有值都会被自动转为字符串；如需存对象，必须手动 JSON.stringify() 和 JSON.parse()
- 不参与网络请求（不像 Cookie），纯前端运行，无服务端开销
- 容量通常为 5–10 MB（远大于 Cookie 的 4 KB），具体取决于浏览器
- 页面刷新、前进/后退均保留数据，仅关闭标签页或调用 clear() / removeItem() 才会丢失
常用操作：增、查、删、清
所有方法都通过 window.sessionStorage 调用：
Session Handoff
下载
创建全面的交接文档，使新AI代理能够无缝继续工作，消除歧义。解决上下文耗尽问题。 时机：(1)用户请求保存交接，(2)上下文即将满，(3)主要任务完成，(4)会话结束，(5)恢复工作时。 关键词：保存状态、创建交接、上下文已满、暂停、从...恢复、加载交接、保存进度、会话转移、交接
-
存数据：
sessionStorage.setItem('token', 'abc123')或直接赋值sessionStorage.token = 'abc123' -
读数据：
sessionStorage.getItem('token')或sessionStorage.token（推荐 getItem，更规范） -
删单个：
sessionStorage.removeItem('token') -
清空全部：
sessionStorage.clear() -
查看键名：
sessionStorage.key(0)（获取第 0 个 key），配合sessionStorage.length可遍历
典型使用场景与示例
适合保存无需跨页共享、但需在本页多次访问或刷新后仍存在的临时状态：
立即学习“前端免费学习笔记（深入）”；
- 表单草稿：用户填写一半关闭页面？重新打开时自动恢复（监听 input + debounce 存 sessionStorage，页面加载时读取并填充）
-
导航状态：比如多步骤向导的当前 step（
sessionStorage.setItem('step', '2')），关掉再进就从头开始，符合预期 - 临时筛选条件：列表页的搜索关键词、排序字段，刷新后不丢失，但换标签页不继承
- 轻量级权限标记：登录后存 token 或用户角色（注意：敏感信息仍建议服务端校验，sessionStorage 不防篡改）
注意事项与避坑提醒
用得方便，但几个细节容易出错：
- 不要存函数、Date、RegExp 等非可序列化对象——JSON.stringify() 会丢弃它们；如需存时间，用
new Date().toISOString() - 避免直接用
sessionStorage.xxx = obj赋值复杂对象，因为会调用toString()导致意外结果（如[object Object]） - 隐私模式下部分浏览器可能禁用 sessionStorage（或限制容量），可加 try-catch 兜底
- 同源策略严格：http://a.com 和 https://a.com 视为不同源，数据不共享；子域名间也不互通
- 与 localStorage 混用时注意区分：localStorage 是长期存储，关闭浏览器也不消失，别误用
