sessionStorage是仅限当前标签页的临时本地存储，关闭标签页即清除；支持setItem/getItem/removeItem/clear等API，需手动序列化对象，适用于表单草稿、筛选条件等场景，但不可存敏感信息。

sessionStorage 是浏览器提供的本地存储机制，它只在当前标签页（或窗口）的生命周期内有效，关闭该标签页后数据自动清除，非常适合实现“仅当前标签页生效”的临时状态管理。

sessionStorage 的核心特性

它和 localStorage 类似，但作用域严格限定在当前浏览上下文（即同一个 tab 或 iframe）中：

• 同一域名下不同标签页之间完全隔离，互不可见
• 页面刷新、前进/后退均保留数据
• 关闭标签页（非整个浏览器）即清空所有 sessionStorage 数据
• 不参与 HTTP 请求，纯前端运行，无服务端负担

基础用法：存、取、删

API 简单直观，全部基于字符串键值对：

• 保存数据：sessionStorage.setItem('key', 'value')（value 会自动转为字符串）
• 读取数据：sessionStorage.getItem('key')，不存在时返回 null
• 删除单个：sessionStorage.removeItem('key')
• 清空全部：sessionStorage.clear()

如需存对象，记得用 JSON.stringify() 和 JSON.parse() 手动序列化反序列化：

sessionStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
const user = JSON.parse(sessionStorage.getItem('user') || '{}');

典型适用场景举例

适合那些不需要跨标签共享、但需要在页面跳转或刷新后依然存在的临时状态：

• 表单草稿：用户填写一半跳转离开，返回时自动恢复输入内容
• 筛选条件暂存：列表页选了分类和排序，点进详情页再返回，保持原筛选结果
• 模态框开关状态：避免用户反复点击弹出多个重叠弹窗
• 临时 token 或临时 ID：比如上传前生成的客户端唯一标识，仅本页流程使用

注意事项与避坑提示

看似简单，但几个细节容易引发问题：

• 只能存字符串：直接存对象、数组、函数会变成 [object Object]，务必手动序列化
• 大小限制约 5–10MB（因浏览器而异），不适合存大量数据或二进制内容
• 同源策略严格：http://a.com 和 https://a.com 视为不同源，数据不共享
• 隐私模式下可能被禁用：部分浏览器在无痕窗口中限制 storage API，建议加 try-catch 容错

安全起见，敏感信息（如密码、token）不应仅依赖 sessionStorage 存储，仍需配合服务端校验与短期有效期控制。