88. sessionStorage 会话存储

本节目标：理解 sessionStorage 的生命周期，区分它与 localStorage 的适用场景，学会用 storage 事件跨标签页通信。

sessionStorage 和 localStorage 啥关系

sessionStorage 的 API 和 localStorage 完全一样。存、取、删、清，方法名字都相同：

sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");
sessionStorage.removeItem("key");
sessionStorage.clear();

区别在哪？生命周期。

localStorage：永久存储，除非手动删除
sessionStorage：会话结束（关闭标签页）就没了

Note

sessionStorage 的生命周期是”标签页级别”。复制一个标签页，会创建一份新的独立 sessionStorage。两个相同标签页的数据互不影响。

什么时候用 sessionStorage

适合存只在当前会话中有用的数据。比如：

表单草稿（关了标签页就丢掉，不用清理）
临时的页面状态
一次性验证码的缓存
标签页私有的会话 ID

实用示例：表单自动保存

用户填表单时实时存到 sessionStorage。万一页面刷新，数据还在：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表单草稿</title>
</head>
<body>
  <h1>写文章</h1>
  <textarea id="content" placeholder="开始写..." rows="10" cols="50"></textarea>

  <script>
    const textarea = document.getElementById("content");

    // 页面加载时恢复草稿
    const draft = sessionStorage.getItem("articleDraft");
    if (draft) {
      textarea.value = draft;
    }

    // 每次输入自动保存
    textarea.addEventListener("input", function () {
      sessionStorage.setItem("articleDraft", textarea.value);
    });
  </script>
</body>
</html>

刷新页面草稿还在，关掉标签页自动清除。用户不需要”保存草稿”按钮。

storage 事件：跨标签页通信

当 localStorage 或 sessionStorage 发生变化时，浏览器会触发 storage 事件。但有个关键点：当前页面自己改的不会触发，只有同源的其他页面改了才触发。

window.addEventListener("storage", function (event) {
  console.log("哪个键变了：", event.key);
  console.log("旧值：", event.oldValue);
  console.log("新值：", event.newValue);
  console.log("哪个页面改的：", event.url);
  console.log("存储对象：", event.storageArea);
});

实际场景：在一个标签页修改主题，其他标签页跟着变。

// 标签页 A：修改主题
localStorage.setItem("theme", "dark");

// 标签页 B：自动响应
window.addEventListener("storage", function (e) {
  if (e.key === "theme") {
    document.body.className = e.newValue;
  }
});

Tip

storage 事件只在同源的其他窗口/标签页触发。当前页面自己修改存储不会触发自己的事件。

存储事件对象属性

属性	说明
`key`	被修改的键名
`oldValue`	修改前的值
`newValue`	修改后的值
`url`	触发修改的页面 URL
`storageArea`	被修改的存储对象（localStorage 或 sessionStorage）

存储限制和最佳实践

两个共享 5MB 左右的配额。别塞太多东西。

存 JSON 字符串而非多个独立键值
用 try...catch 包裹写操作，防止超出配额报错
敏感信息（密码、token）不建议存 localStorage/sessionStorage

try {
  localStorage.setItem("bigData", hugeString);
} catch (e) {
  if (e.name === "QuotaExceededError") {
    console.log("存储空间满了！");
  }
}

Warning

localStorage 和 sessionStorage 都不安全。任何人打开浏览器开发者工具都能看到存了什么。敏感数据请使用 HttpOnly Cookie 或服务端存储。