17370845950

sessionStorage是仅在当前标签页生命周期内有效的前端存储机制；关闭标签页即清空数据，同源多标签页间不共享，适用于临时状态如表单草稿，API与localStorage一致但作用域不同。

会话存储（sessionStorage）是浏览器提供的、仅在当前标签页生命周期内有效的键值对存储机制；关闭该标签页（或窗口）后，所有数据自动清空。它和 localStorage 接口几乎完全一致，但数据寿命和作用域完全不同——这是唯一真正需要你记住的区别。

为什么关掉页面就丢了？——看懂 sessionStorage 的作用域规则

它不是“按时间”失效，而是“按会话”绑定：只要标签页没关闭，哪怕刷新、跳转、前进后退，数据都还在；一旦关闭该标签页（哪怕只是 Ctrl+W），整个 sessionStorage 就被浏览器彻底销毁。

• 同源的多个标签页之间互不共享 sessionStorage，哪怕 URL 完全一样
• 同一标签页内的 iframe（同源）可以共享父页的 sessionStorage
• 新开的标签页（即使地址相同）拥有独立的 sessionStorage 实例
• 不支持跨域，也不随 HTTP 请求发送，纯前端隔离

setItem / getItem 写法一样，但存错地方就白干

两者 API 完全一致，所以新手常误以为“换行改个名就能长期保存”，结果上线后发现用户填一半表单关了页面，再打开啥都没了——因为用了 sessionStorage 而非 localStorage。

sessionStorage.setItem('draft', JSON.stringify({ name: '张三', email: 'zhang@example.com' }));
// 刷新后仍可读
const draft = JSON.parse(sessionStorage.getItem('draft') || '{}');

// 但关掉这个标签页，上面这行就会返回 null

• 必须手动 JSON.stringify() 存对象，getItem() 返回的是字符串，直接用会报错
• 永远检查 getItem() 返回是否为 null，否则 JSON.parse(null) 抛 TypeError
• 别指望它替代后端持久化——它连页面刷新都不保证（极端情况如崩溃恢复可能丢失）

选 sessionStorage 还是 localStorage？看这三个判断点

不是“哪个更新潮”，而是“谁更守规矩”：

立即学习“Java免费学习笔记（深入）”；

• 要跨页面保留（比如主题色、语言偏好、登录 token）→ 用 localStorage
• 只在当前流程中暂存（比如多步表单中间状态、临时筛选条件、未提交的草稿）→ 用 sessionStorage
• 涉及敏感操作（如二次验证环节的临时凭证），且不希望用户换标签页还能复用 → sessionStorage 更安全（比 localStorage 多一层天然隔离）

注意：两者容量通常都是 5–10MB，IE9+ 兼容，但 Safari 在无痕模式下可能直接禁用 sessionStorage（返回 QuotaExceededError），这点容易被忽略。