前端怎样监听其他标签页的 localStorage 变化

做后台管理系统时，我经常会同时打开两个同源标签页：一个页面切换了主题，另一个页面却还停在旧颜色。这个场景不需要轮询，浏览器已经提供了 storage 事件。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

结论先说：监听页要在 window 上注册 storage 事件；localStorage 被另一个同源标签页修改后，当前页会收到 StorageEvent，但发起修改的那一页不会收到自己的事件。下面用一个主题同步小组件把这个边界讲清楚。

本文解决三件事：确认事件来源；读取 key、oldValue、newValue；处理删除、初始化和组件清理。

先确定 storage 事件从哪里来

localStorage 共享的是同源存储区。标签页 A 写入数据后，同源的标签页 B、C 可以收到事件；标签页 A 自己不会因为这次写入收到 storage 事件。因此，当前页如果要立刻改变界面，仍然要在自己的写入函数里直接调用更新逻辑。

事件监听写法很简单：

window.addEventListener("storage", (event) => {
  // 只处理主题键，避免把无关的存储变化带进业务状态。
  if (event.storageArea !== localStorage || event.key !== "theme") {
    return;
  }

  // newValue 是另一个同源上下文写入后的字符串值。
  document.documentElement.dataset.theme = event.newValue || "light";
});

如果使用的是 sessionStorage，不要把它当成跨标签页广播工具：它的通知范围受同一个顶级浏览上下文约束，通常只覆盖同一标签页里的相关 iframe。跨标签页同步主题时，优先考虑 localStorage 或其他明确的跨上下文通信机制。

建立一个主题同步小组件

我会把“读取初始状态”“监听变化”“应用主题”拆开。这样首屏已经有主题时可以直接初始化，其他标签页改主题时再由事件补上，组件卸载时也能移除监听。

function mountThemeSync() {
  const themeKey = "theme";

  // 首次进入页面时，先读取已经存在的主题值。
  const applyTheme = (theme) => {
    document.documentElement.dataset.theme = theme || "light";
  };
  applyTheme(localStorage.getItem(themeKey));

  const onStorage = (event) => {
    // 同时过滤存储区和键名，避免误响应其他业务数据。
    if (event.storageArea !== localStorage || event.key !== themeKey) {
      return;
    }

    // removeItem 会让 newValue 变成 null，此时回退到默认主题。
    applyTheme(event.newValue);
  };

  window.addEventListener("storage", onStorage);

  // 返回清理函数，适合组件卸载或页面切换时调用。
  return () => window.removeEventListener("storage", onStorage);
}

const unmountThemeSync = mountThemeSync();

这里的关键不是把事件当成“当前页的 setItem 回调”，而是把它当成其他同源上下文的变化通知。当前页切换主题时，可以共用同一个 applyTheme：

function setTheme(theme) {
  // 当前页立即更新，其他同源页随后通过 storage 事件更新。
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

删除、初始化和清理分别怎么处理

StorageEvent 的 newValue 是字符串或 null。调用 removeItem("theme") 后，监听页收到的就是 null，所以组件需要明确默认值，而不是直接把 null 写进 DOM 属性。

首次加载不能等待事件：如果页面打开时已经有主题，之前发生的写入不会重新广播给新页面。初始化时主动调用 localStorage.getItem，事件监听只负责接收后续变化。对于更新后的值，event.key 可以做精确过滤，event.url 可以在排查时帮助判断哪个页面发起了变化，event.storageArea 则用于确认来源存储区。

如果组件会反复挂载，务必保存同一个处理函数并调用 removeEventListener。每次挂载都创建一个匿名函数却不保存引用，后续无法解绑，最终可能出现一次变化触发多次更新。

最容易误判的几个边界

当前页没有响应：这是设计行为，不是监听失败。当前页的按钮逻辑应先更新界面，再写入 localStorage。

两个地址看起来一样却收不到事件：先确认协议、主机和端口都相同；跨源页面不能共享这份 localStorage。

把 sessionStorage 当成标签页广播：它的作用域更窄，适合当前顶级浏览上下文中的临时状态，不适合多个标签页之间的主题同步。

把事件当成可靠消息队列：主题、显示偏好这类“最新值”适合用它同步；支付结果、不可丢失命令等场景应使用服务端或专门的通信方案，并设计重试和确认。

小结：监听其他标签页要记住什么

解决“其他标签页的 localStorage 变化怎么监听”，核心只有一句：在 window 上监听 storage，用 key 和 storageArea 过滤，再用 newValue 更新当前页。当前页的即时更新放在自己的写入函数里，首次状态靠主动读取，组件销毁时记得解绑。

相关问题：

1. 删除 localStorage 后怎么恢复默认值？判断 event.newValue === null，再应用预设主题或空状态。

2. 为什么 sessionStorage 不能直接同步其他标签页？它的作用域不是所有同源标签页，而是同一顶级浏览上下文中的相关文档。

3. 当前页也想复用同一套逻辑怎么办？把主题应用提取成函数，在本地写入后直接调用一次，跨页变化再由 storage 事件调用。