sessionstorage 是单标签页临时存储方案，刷新保留、关 tab 清除，适合存轻量可序列化状态；存对象需 json.stringify/parse；应防抖写入、早读按需用；注意同源隔离、容量限制与敏感信息风险。
sessionStorage 是浏览器原生提供的单标签页临时存储方案，数据只在当前标签页内有效，刷新保留、关 tab 清除，非常适合管理页面级临时状态。用对了，能显著提升表单体验、筛选一致性与导航连贯性；用错了，容易存错类型、读不到值或埋下安全风险。
存什么：只放轻量、可序列化的状态标识
它只接受字符串，所有值都会被隐式转成字符串——直接存对象会变成 [object Object]，存函数、Date、RegExp 会丢失关键信息。真正适合存的是：
- 表单字段值（如搜索关键词、选中的分类 ID）
- UI 控制状态（如“侧边栏是否展开”“当前步骤序号”）
- 临时令牌或客户端生成的 ID（如下载任务 token）
- 时间戳或布尔标记（如 list_fresh: "done" 表示列表刚加载过）
存对象必须手动 JSON.stringify()，读取时用 JSON.parse() 并加兜底：
const raw = sessionStorage.getItem('form');
const data = raw ? JSON.parse(raw) : {};
怎么存：防抖写入 + 响应式同步更可靠
频繁触发 input 或 toggle 时，不要每次变更都调用 setItem()，否则影响性能且可能写入失败。推荐做法：
- 输入类场景：监听 change 或 input，搭配 debounce（如 800ms），再写入
- Vue 项目：封装 useSessionState 组合式函数，内部用 watch 自动同步 ref 与 sessionStorage
- React 项目：用自定义 Hook（如 useSessionStorage），首次渲染读取，后续 setState 触发写入
- 通用兜底：所有 setItem/getItem 操作外层包 try-catch，尤其在隐私模式或低版本 WebView 中可能抛错
什么时候读：页面加载即恢复，返回时主动判断
不是所有时机都适合读取。关键原则是「早读、按需用」：
- DOMContentLoaded 或组件 mounted 时立即读取并填充表单/还原 UI 状态
- 移动端返回上一页时，检查 sessionStorage 标记（如 back_from_detail），决定是否跳过请求或强制刷新
- 多步骤流程中，每步切换前先保存当前状态，离开页面前不清理，让用户返回时自然延续
- 避免在 beforeunload 或 pagehide 中清空——这些事件在返回时也可能触发，反而破坏状态连续性
注意什么：隔离性、容量与安全性边界
sessionStorage 的天然隔离性是优势，也是易错点：
- 同一网址新开标签页，sessionStorage 完全独立——这不是 bug，是设计使然
- 容量通常为 5–10 MB，但建议单个 key 不超过几百 KB，避免序列化后超限
- 同源策略严格：http 和 https、www 和非 www 均视为不同源，数据不互通
- 敏感信息（如 token、密码、身份凭证）不应仅依赖 sessionStorage 存储，仍需服务端校验与短期有效期控制
