sessionStorage是仅限当前标签页的会话级字符串键值存储，关闭标签页即清空；存取需手动JSON序列化/反序列化，刷新保留但新开同URL标签页无数据，不响应自身修改，适用于表单草稿等临时场景，非安全存储。
sessionStorage 是浏览器提供的会话级键值对存储机制，只在当前标签页生命周期内有效，关闭该标签页后数据自动清空。它不是“临时变量”，也不是“内存缓存”，而是一个有明确作用域、隔离性与序列化要求的持久化 API。
怎么存和取数据？注意类型转换
sessionStorage 只接受字符串作为值，传对象、数字、布尔值都会被 .toString() 强转，导致信息丢失：
// ❌ 错误：直接存对象 → 存进去的是 "[object Object]"
sessionStorage.setItem('user', { name: 'Alice' });
// ✅ 正确：手动序列化 + 反序列化
sessionStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }));
const user = JSON.parse(sessionStorage.getItem('user') || '{}');
-
getItem()找不到 key 时返回null，不是undefined，所以|| '{}'或?? '{}'是安全兜底 - 数字、布尔等基础类型也建议统一走
JSON.stringify，避免隐式转换歧义（比如0→''）
为什么刷新页面还在，但新开同个 URL 的标签页就没了？
这是 sessionStorage 最常被误解的一点：
- ✅ 同一标签页内刷新、前进/后退、
Ctrl+Shift+T恢复关闭的页面 → 数据保留 - ❌ 新开一个标签页（哪怕地址栏完全一样）→ 创建全新会话，
sessionStorage隔离且为空 - ⚠️
window.open()打开的子窗口会复制初始值，但之后各自独立修改，互不通知
这和 Cookie 的“会话 Cookie”行为不同——后者是按域名+协议共享的，而 sessionStorage 是严格按渲染进程实例隔离的。
立即学习“Java免费学习笔记（深入）”；
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
监听别人改了 sessionStorage？别指望它
storage 事件不会响应当前页面自身的修改，只在同源的其他标签页调用 setItem/removeItem 时触发：
window.addEventListener('storage', (e) => {
console.log('其他标签页改了：', e.key, e.newValue);
});
- 当前页改了
sessionStorage，自己收不到这个事件 -
中的同源页面修改，能触发父页的事件（前提是同源） - 如果你靠这个做跨标签页通信，得换方案（如
BroadcastChannel）
哪些场景真适合用？哪些其实不该用？
✅ 推荐场景：
- 多步骤表单草稿（用户意外关页后回来还能续填）
- 单页应用中暂存路由参数或筛选条件（比如搜索页跳详情页再返回）
- 临时令牌（如 OAuth 临时 code），配合显式过期检查（它自己不支持 TTL）
❌ 不该用的：
- 用户长期偏好设置（该用
localStorage） - 需要跨标签页同步的状态（
sessionStorage天然做不到） - 敏感凭证（如原始密码、长期 token）——它对 JS 完全可见，且无加密机制
最易被忽略的一点：sessionStorage 不是安全边界。只要页面能执行 JS，数据就能被读走。它解决的是“生命周期问题”，不是“保密问题”。
