SessionStorage 是当前标签页内安全、规范的状态存储方案，通过 setItem/getItem 管理字符串化键值对，需手动 JSON 序列化/解析；可封装工具简化操作，但仅限单标签页、不跨域、容量有限且不可监听变化。
SessionStorage 可以作为全局变量的安全替代方案，用于在当前浏览器标签页的生命周期内保存状态，它比直接挂载到 window 或声明全局变量更规范、更可控，且不会污染全局命名空间或引发意外覆盖。
用 setItem 和 getItem 管理键值对
SessionStorage 是一个仅限当前会话（标签页）的键值存储，所有数据自动字符串化，读写需手动处理类型：
- 保存状态：用
sessionStorage.setItem(key, value)，value必须是字符串；如需存对象，先用JSON.stringify() - 读取状态：用
sessionStorage.getItem(key)，返回字符串，对象需用JSON.parse()还原 - 删除单个：用
sessionStorage.removeItem(key)；清空全部用sessionStorage.clear()
例如：
sessionStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'}));
const user = JSON.parse(sessionStorage.getItem('user') || '{}');
封装成易用的状态管理工具
为避免重复写 JSON.stringify/parse 和空值判断，可封装一个轻量工具：
- 定义一个
sessionStore对象，提供set(key, value)、get(key)、remove(key)方法 -
set内部自动序列化；get自动解析并默认返回null或指定默认值 - 可加简单类型校验（如非空对象才存），避免无效数据写入
这样调用就接近“类全局变量”体验：
sessionStore.set('filters', {search: 'js', page: 2});
const filters = sessionStore.get('filters') || {};
注意生命周期和适用边界
SessionStorage 不是万能替代，需明确它的行为特点：
立即学习“Java免费学习笔记（深入）”；
- 只在同一个标签页内有效，新开标签页、窗口或刷新页面后数据仍在，但关闭标签页即销毁
- 不跨域共享，子域名之间也不互通（除非显式设置 document.domain，但已不推荐）
- 容量约 5–10MB（因浏览器而异），适合中等结构数据，不适合存大文件或大量日志
- 不能监听变化，如需响应式更新，要配合自定义事件或状态库（如配合 useEffect 或 computed）
避免常见误用
直接用 sessionStorage 替代全局变量时容易踩坑：
- 忘记类型转换：存了对象却没
JSON.parse，导致读出来是字符串"{...}" - 未处理
getItem返回null：直接解析会报错，应加空值判断 - 误以为能跨页面通信：两个标签页的 sessionStorage 完全隔离，不能用于多窗口协作
- 用它存敏感信息（如 token）却不配合 HttpOnly Cookie 或其他防护，存在 XSS 泄露风险
