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

直接监听 `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

适用场景很明确

它适合弱一致性、低频广播类状态，比如主题切换、用户登录态、语言偏好、是否已阅读公告等。不适合强同步逻辑（如协同编辑、实时计数器），因为事件不保证绝对顺序和即时性，且依赖浏览器行为。