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 存储，仍需配合服务端校验与短期有效期控制。
