监听存储事件
通过 storage 事件响应跨标签页的存储变化
监听存储事件 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
跨标签页通信
每当 localStorage 发生变化时，网页存储都会在其他所有同源标签页上触发一个存储事件。这是让同一应用的多个已打开标签页保持同步的最简单方式，例如传播登出状态或主题切换。
注册监听器
请在 window 上附加处理函数：window.addEventListener("storage", handleStorage)。监听器只会在同源的其他标签页或窗口中触发，绝不会在执行更改的标签页中触发，因为该标签页已经知道这次更新。
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});StorageEvent 属性
事件包含 key（发生变化的键）、oldValue 和 newValue（字符串或 null）、url（触发变化的页面）以及 storageArea（存储对象，即 localStorage 或 sessionStorage）。
clear() 将键设为 null
当另一个标签页调用 localStorage.clear() 时，存储事件只触发一次，并且 key === null，oldValue 和 newValue 也都为 null。请识别这一模式，将批量清除与单键更新分开处理。
removeItem 的行为
调用 removeItem 会触发事件，其中 newValue === null，而 oldValue 保存之前的字符串。请检查 newValue 是否严格为 null，而不是字符串 "null"，以区分“键已删除”和“键被设置为 null 字符串”。
同标签页限制
写入更改的标签页永远不会触发该事件。若要响应您自己的写入，请在 setItem 后派发自定义事件，或者使用一个辅助函数包装 setItem，同时调用存储接口和应用内事件总线。
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}跨标签页登出
用户登出时，使用时间戳设置类似 auth:logout 的键。其他标签页会在存储事件中监听该键，并立即清除各自的会话状态，将用户重定向到登录页面，无需用户再次点击。
主题与偏好同步
用户在一个标签页中切换主题时，将 theme 写入 localStorage。其他每个标签页中的存储处理函数都会读取新值，并应用 document.documentElement.dataset.theme，因此更改会立即显示在所有已打开的标签页中。
按键筛选
通过根据 e.key 分支处理，一个处理函数就能服务多个功能。使用分支选择语句可以让分发器保持清晰：每个分支处理一个存储键，并忽略其他功能写入同一存储对象的不相关更改。
sessionStorage 不跨标签页
sessionStorage 按标签页独立存在，其写入不会在其他标签页中触发存储事件，因为每个标签页都有各自独立的 sessionStorage。需要跨标签页传递信号时，请使用 localStorage，即使您随后会立即删除该键。
BroadcastChannel 替代方案
对于更丰富的跨标签页消息传递，BroadcastChannel 接口无需接触存储即可发送结构化数据：new BroadcastChannel("app").postMessage({ type: "logout" })。临时信号应使用 BroadcastChannel，而需要持久保存的状态应使用存储事件。
知识检查
如果标签页 A 调用 localStorage.setItem("theme", "dark")，哪些标签页会收到存储事件？
总结
当另一个标签页中的 localStorage 发生变化时，存储事件会传递跨标签页通知，其中包含 key、oldValue、newValue 和 storageArea。写入更改的标签页不会触发该事件，因此应将其与自定义事件结合，以同时完成本地和远程分发。请将其用于登出传播、主题同步以及任何需要在多个浏览器窗口间保持一致的状态。
常见问题解答
「监听存储事件」课时是免费的吗？
是的 — 「监听存储事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「监听存储事件」这节课中我会学到什么？
通过 storage 事件响应跨标签页的存储变化 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「监听存储事件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。