监听storage事件是实现同源多标签页实时数据同步最轻量、兼容性最好的原生方案，依赖localStorage同源共享与变更广播机制，一个标签页写入时其他同源标签页立即收到通知（当前页不触发），需区分触发方与监听方并配套初始化读取。
监听 storage 事件是实现同源多标签页实时数据同步最轻量、兼容性最好的原生方案。它不依赖后端或额外库，核心靠 localstorage 的“同源共享 + 变更广播”机制——一个标签页写入，其他同源标签页立刻收到通知（当前页自身不触发），天然适合状态广播类场景。
为什么 storage 事件能跨标签页通信
localStorage 在同一协议、域名、端口（即同源）下所有标签页共用一份存储空间。当任意标签页调用 localStorage.setItem() 或 removeItem() 时，浏览器会向**其他所有同源已打开的标签页**派发 storage 事件。这个事件不是轮询，而是即时、异步、零延迟的原生通知。
- 当前页修改 localStorage 不会触发自身的
storage事件（防止自循环） - 事件对象包含
key、newValue、oldValue、url等字段，可用于精准响应 - IE8+、Chrome、Firefox、Safari（含 iOS）均支持，无 polyfill 需求
标准实现步骤（发送与接收分离）
必须区分“触发方”和“监听方”，且两者逻辑不能混用。
-
触发方（如用户登出、切换主题）：仅执行一次写操作，例如
localStorage.setItem('theme', 'dark');
或为确保强触发（避免值未变导致部分浏览器不发事件），可追加时间戳：localStorage.setItem('sync-flag', Date.now().toString()); -
监听方（每个需同步的页面）：在页面加载早期绑定全局监听器：
window.addEventListener('storage', (e) => {<br> if (e.key === 'theme') {<br> applyTheme(e.newValue); // 执行 UI 更新<br> }<br>});
必须配套的初始化动作
新打开的标签页不会收到历史 storage 事件，所以只监听不够——必须主动读取当前值并应用，否则主题错乱、登录态显示异常。
- 页面加载时立即执行：
const savedTheme = localStorage.getItem('theme') || 'light'; - 立即应用该值：
document.documentElement.setAttribute('data-theme', savedTheme); - 同时设置默认 fallback：
if (!savedTheme) localStorage.setItem('theme', 'light');
常见陷阱与规避方法
看似简单，实际容易因细节失效。
-
空值处理：
e.newValue和e.oldValue在新增或删除时为null，解析前需判空，例如：const data = e.newValue ? JSON.parse(e.newValue) : null; -
避免循环写入：不要在监听回调里再次调用
localStorage.setItem(key, ...)，否则可能引发 A→B→A 的链式触发 -
隐私模式兼容：Safari 无痕、某些 WebView 下 localStorage 可能被禁用，建议降级轮询（如每 2 秒读一次）或结合
BroadcastChannel作为主通道 -
键名校验：始终检查
e.key === 'your-key'，避免响应无关变更（如第三方 SDK 写入）
