如何在无服务器情况下实现浏览器多窗口间状态共享？

当用户打开同一网站的多个浏览器窗口/标签页时，要让一处修改同步到所有窗口，核心是实现同源窗口间的状态通信与同步，以下是几种可落地的技术思路，参考Bjorn Staal创作的"Entangled"这类多窗口联动作品的实现逻辑：

一、利用浏览器本地存储事件（LocalStorage/SessionStorage） #

这是最轻量化的无后端方案，依赖浏览器同源窗口共享存储的特性：

• 实现逻辑：每次修改状态时，将状态序列化为JSON字符串存入localStorage；其他窗口监听storage事件，一旦检测到存储内容变化，就读取最新状态并更新页面UI。
• 注意事项：sessionStorage仅在当前会话的窗口组内共享，关闭窗口即失效；storage事件不会在触发修改的窗口本身触发，需要单独处理当前窗口的状态更新。
• 适用场景：简单状态同步（比如主题切换、表单输入内容同步），"Entangled"中基础的窗口元素联动可基于此实现。

二、使用Broadcast Channel API #

这是浏览器专门为同源窗口通信设计的API，比本地存储更灵活：

• 实现逻辑：
  1. 所有窗口创建同一个名称的Broadcast Channel实例：const syncChannel = new BroadcastChannel('app-state-sync');
  2. 发起修改的窗口通过syncChannel.postMessage({ type: 'STATE_UPDATED', payload: newState })发送状态变更消息
  3. 其他窗口监听message事件，收到消息后直接解析并更新本地状态
• 优势：支持直接传递复杂数据结构（无需序列化），可以主动向所有窗口广播（包括发送消息的窗口，可自行过滤），实时性更强。
• 适用场景：中等复杂度的交互同步（比如多窗口协同调整UI布局），"Entangled"的复杂联动逻辑可基于此实现。

三、Service Worker 中转消息 #

借助Service Worker的后台运行能力，实现更可靠的跨窗口通信：

• 实现逻辑：
  1. 注册Service Worker，在Worker脚本中监听message事件
  2. 窗口向Service Worker发送状态变更消息：navigator.serviceWorker.controller.postMessage(updatedState)
  3. Service Worker通过clients.matchAll()获取当前所有活跃的同源窗口，将消息逐个转发
• 优势：即使窗口处于后台休眠状态，也能接收消息；结合Push API还能实现跨设备的状态同步。
• 适用场景：需要后台持久化同步的场景。

四、WebSocket 后端中转（跨设备/多用户场景） #

如果需要跨浏览器甚至跨设备的同步，就得依赖后端服务器：

• 实现逻辑：
  1. 每个窗口前端建立WebSocket连接，订阅同一个主题频道
  2. 发起修改的窗口将状态变更数据发送到后端服务器
  3. 后端服务器将变更消息广播给所有订阅该频道的客户端窗口
  4. 客户端收到广播后，更新本地状态
• 优势：不受同源限制，支持多用户、跨设备的全局同步。
• 适用场景：多用户协同编辑、大型应用的全局状态同步。

实践建议 #

• 简单场景优先选LocalStorage事件或Broadcast Channel API，无需后端，开发成本低
• 涉及跨设备或多用户的复杂场景，用WebSocket结合后端实现
• 同步时要处理冲突：比如给状态加版本号、时间戳，避免多窗口同时修改导致的状态不一致问题

内容的提问来源于stack exchange，提问作者Tanishq Vyas