处理跨标签页的存储事件

当用户在两个标签页中打开应用，并在标签页 A 中更新某个值时，标签页 B 仍会显示旧状态。尽管两个标签页共享 localStorage，但每个标签页在内存中都有自己的 React 状态。

如果没有协调机制，各个标签页对当前值的认识就会不一致。

每当 localStorage 发生变化时，浏览器都会在同一源的其他标签页上分发存储事件。重要的是，发起更改的标签页不会触发该事件。

这正是标签页 B 需要的信号，可用来得知标签页 A 更新了某项内容。

在 useEffect 中调用 window.addEventListener('storage', handler)，并返回一个移除该监听器的清理函数。这样组件就能订阅跨标签页的更改。

该副作用应在挂载时运行一次，因此适合使用空依赖数组或稳定的依赖数组。

事件对象包含 key（发生变化的键）、oldValue 和 newValue（变化前后的字符串），以及 storageArea（受影响的存储对象）。

键为空值且值也为空值，表示存储内容已被完全清除。

存储事件会针对该源中的每个键触发，因此您的处理程序应在响应前检查 event.key === yourKey。忽略无关的键可以避免不必要的重新渲染。

还要处理 event.newValue 为空值的情况，这表示该键已被移除。

收到相关更改后，请解析 event.newValue，并调用您的设置函数更新 React 状态。这样，第二个标签页就能与其他位置发生的更改保持同步。

结合 useLocalStorage 钩子后，就能闭合标签页之间的同步环路。

BroadcastChannel 允许同一源的标签页通过 postMessage 直接互相发送消息。与借助存储事件传递消息相比，这种方式更加简洁，即使不写入 localStorage 也能工作。

您可以按名称创建频道，发布更新，并监听 message 事件。

React 提供了 useSyncExternalStore，用于以并发安全的方式订阅外部存储。您可以将它的订阅函数连接到存储事件，并将它的快照函数连接到一次 localStorage 读取。

这样，外部存储的更新就能正确地与 React 渲染集成。

一个经典的应用场景是在所有位置注销：当一个标签页清除身份验证标志后，其他标签页中的存储事件会检测到这一变化，并将它们重定向到登录界面。

这样可以防止过时的标签页继续显示已通过身份验证的内容。

主题也是很合适的场景：在一个标签页中切换深色模式会写入 localStorage，其他标签页会触发存储事件，并立即更新主题状态以保持一致。

无论用户切换到哪个标签页，都能看到一致的外观。

跨标签页同步归结为监听 storage 事件（或使用 BroadcastChannel）、筛选出您的键，并根据新值更新 React 状态。

对于稳健且并发安全的订阅，useSyncExternalStore 是现代的选择。

检验您对跨标签页事件的理解。

您了解到 storage 事件会在其他标签页中触发，并学习了如何监听事件、按键筛选和更新状态，以及 BroadcastChannel 和 useSyncExternalStore 这两种替代方案。

您还了解了“在所有位置注销”和跨标签页同步深色模式等实际使用场景。