storage事件仅在同源其他标签页修改localstorage时触发，当前页调用setitem不会触发自身；需早期注册监听、初始化读取值并处理safari无痕模式及document.domain兼容性问题。
storage事件只在其他同源标签页修改时触发
当前页调用localStorage.setItem()，自己**不会收到**storage事件——这是设计行为，不是 bug。它本质是浏览器提供的“跨文档广播机制”，仅向同源下**其他已打开的窗口/标签页**派发事件。
常见误判场景包括：
- 在 DevTools 的 Application 面板手动删 key，部分 Safari 旧版本不触发事件
- 用
sessionStorage代替localStorage，后者根本不会跨标签页通信 - 直接赋值
localStorage.key = 'value'绕过 API，不会触发任何事件 - 两个页面协议、端口或子域不同（如
http://localhost:3000vshttp://127.0.0.1:3000），视为不同源，事件隔离
监听必须在页面加载早期注册
如果window.addEventListener('storage', handler)写在DOMContentLoaded之后，或组件 mount 时才挂载，就可能错过其他标签页早已发生的变更——事件不会重放，也不会排队。
稳妥做法是：把监听逻辑放在内联 <script></script> 中，确保在 HTML 解析阶段就执行：
<script>
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
const current = localStorage.getItem('theme');
document.documentElement.setAttribute('data-theme', current || 'light');
}
});
</script>
注意：不要依赖e.newValue，它在removeItem()时为null，在clear()时e.key也为null；统一用localStorage.getItem(e.key)读取最新值更可靠。
必须配套初始化逻辑，否则新标签页显示错乱
storage 事件不提供“当前状态”，只通知“发生了变更”。新开一个标签页时，它收不到历史变更事件，若只靠监听，document.documentElement可能仍保持默认主题，与实际localStorage值不一致。
所以三步缺一不可：
- 页面加载时立即读取
localStorage.getItem('theme') - 用该值设置
data-theme和 CSS 变量 - 若读不到，写入 fallback 值（如
localStorage.setItem('theme', 'light')），确保后续事件有明确依据
Safari 无痕模式和 document.domain 是隐形断点
Safari 在无痕窗口中可能完全禁用storage事件，且不抛错，导致监听静默失效。检测方式很简单：
if (typeof localStorage === 'undefined') {
// 降级处理：轮询或禁用跨页同步
}
另一个致命兼容性坑：document.domain = 'example.com'会直接让 Chrome 等浏览器禁用storage事件——这不是配置问题，是已知限制。只要document.domain !== location.hostname为 true，就基本可以确定事件失效，需切换为postMessage + iframe 或 BroadcastChannel 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
