storage事件监听的是其他同源标签页对localStorage的修改，当前页自身修改不会触发该事件；常见失效原因包括监听注册过晚、绑定对象错误、重复注册未清理、手动修改不触发、跨域或隐身模式隔离。
storage 事件不是“监听自己改了啥”，而是“收其他同源标签页发来的广播”。当前页调用 localStorage.setItem()，自己根本收不到 storage 事件。
为什么 window.addEventListener('storage', handler) 没反应
常见静默失败原因有这几个：
- 注册太晚：比如在
DOMContentLoaded后才加监听，而其他标签页早已改完 —— 应该在<script>内联脚本里第一时间挂载 - 监听对象错：现代浏览器统一用
window，但 IE8–9 要求绑定到document；若需兼容老 IE，得做 UA 判断或用 polyfill - 重复注册没清理：组件反复 mount / unmount 却没配对调用
removeEventListener，导致同一回调执行多次、状态混乱 - 手动改值不触发：在 Chrome DevTools 的 Application 面板里删 key，多数版本会触发，但旧版 Safari 可能完全不发事件
- 跨域或隐身窗口：不同协议、端口、子域之间不互通；普通窗口和隐身窗口也被视为不同源，storage 事件不会跨过去
如何安全读取 storage 事件里的新值
event.newValue 不可靠，尤其在以下场景：
- 调用
localStorage.removeItem('key')时，event.newValue是null，但你想知道删前的值？得看event.oldValue - 调用
localStorage.clear()时，event.key是null，无法定位具体键，只能全量重载状态 - IE9 中事件触发后立刻读
localStorage.getItem(event.key)可能还是旧值，得加setTimeout(() => { /* read */ }, 0)
稳妥做法是：先判断 event.key 是否存在，再直接读取最新值 —— 不依赖 event.newValue 或 event.oldValue：
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
const current = localStorage.getItem('theme');
document.documentElement.setAttribute('data-theme', current || 'light');
}
});监听指定 key 的最小可用封装
不用框架、不引入库，一个轻量函数就能搞定按 key 过滤 + 自动清理：
function onStorageKey(key, callback) {
const handler = (e) => {
if (e.key === key) callback(e);
};
window.addEventListener('storage', handler);
return () => window.removeEventListener('storage', handler);
}
<p>// 使用
const off = onStorageKey('cart', (e) => {
renderCart(JSON.parse(localStorage.getItem('cart') || '[]'));
});</p><p>// 组件卸载时调用
// off();这个封装避开了全局污染、重复注册、清理遗漏等高频问题。真正复杂的是多标签协同逻辑 —— 比如主标签清空 cart 后，其他标签不该只刷新 UI，还得同步清空自己的本地状态，否则下次写入可能覆盖错误数据。这类边界必须靠业务层显式处理，storage 事件本身只负责“通知”，不负责“同步”。
