如何通过 storage 事件实时监听同一域名下的数据变更-H5教程-PHP中文网

直接监听storage事件可实现同源多标签页数据同步，但需严格同源、显式调用setitem等api，并执行“读取+监听”双步骤，注意空值处理、避免循环写入及兼容性兜底。

如何通过 storage 事件实时监听同一域名下的数据变更

直接监听 `storage` 事件就能实现同一域名（更准确说是**同源**）下多标签页间的数据实时同步，但必须满足前提、做好初始化、避开常见陷阱——它不是“注册个监听器就完事”，而是一套轻量却需严谨配合的机制。

缺一不可，否则事件根本不会触发：

严格同源：协议（http/https）、域名、端口三者完全一致。比如 https://example.com:8080 和 http://example.com:8080 不互通；localhost:3000 与 127.0.0.1:3000 也被视为不同源
必须显式调用 API：只有 localStorage.setItem()、removeItem() 或 clear() 才会广播事件；直接赋值如 localStorage.token = 'abc' 是无效的，不会触发任何监听

只监听 event 不够——新打开的标签页收不到历史变更，UI 会错乱。必须“读取 + 监听”双到位：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

页面加载后立即读取当前值：比如 const theme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme', theme);
在 DOM 可交互时注册监听器：推荐在 document.readyState === 'interactive' 或框架生命周期钩子（如 React 的 useEffect、Vue 的 onMounted）中执行 window.addEventListener('storage', handler)
监听中精准响应并处理空值：检查 event.key === 'theme'，再用 event.newValue 更新界面；注意 newValue 在 removeItem() 时为 null，需判空，避免解析报错

看似简单，实际容易静默失效或引发循环：

当前页修改不触发自身事件：这是设计使然，防止自循环。所以状态更新逻辑要统一入口，不要一边改 DOM 一边反复写 localStorage
避免跨页循环写入：比如 A 标签页改主题 → B 标签页收到事件 → B 也调用 setItem → C 标签页又收到……可在写入前比对当前值，或加时间戳标记
兼容性兜底有必要：Safari 无痕模式、某些 WebView 中 storage 事件可能被禁用。可搭配简易轮询（如每 2 秒比对 getItem 值）或降级使用 BroadcastChannel