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 是长期存储，关闭浏览器也不消失，别误用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！