常见的跨上下文通信方案总结
根据通信媒介的类型，主要可以分为以下 4 大类方案：
1. 广播与消息通道类（推荐度最高）
依靠浏览器内核原生提供的事件通道进行发布与订阅，不需要写入磁盘，性能最佳。
-
BroadcastChannel API
-
机制：创建一个指定名称的频道，所有加入该频道的同源上下文（Tab、iframe、Worker）均可收发消息。
-
特点：API 现代化、语义明确、多对多广播。
-
限制：要求同源；不支持低版本 IE。
-
SharedWorker（共享 Web Worker）
-
机制：多个同源标签页连接同一个在后台运行的 Worker 进程，通过
port.postMessage进行中转广播或状态汇聚。 -
特点：适合复杂协同（如多个 Tab 共享同一个长连接/计数器/状态管理器）。
-
限制：调试成本相对较高，移动端部分浏览器支持不完善。
2. 本地存储媒介 + 事件监听类（高兼容性）
利用浏览器持久化或会话存储层作为中转底座。
-
LocalStorage +
storage事件 -
机制：页面 A 修改
localStorage，同源的其他页面会立即捕获window.onstorage事件。 -
特点：兼容性极佳（所有主流浏览器全支持），自带持久化。
-
限制：当前发起写入的页面自身不会触发
storage事件；数据频繁变化会带来不必要的磁盘 I/O。 -
IndexedDB + 轮询 / 结合其他触发器
-
机制：大容量结构化数据存入 IndexedDB。
-
特点：支持存储海量数据与二进制文件。
-
限制：IndexedDB 自身没有直接跨页广播变更的事件，通常需要配合
BroadcastChannel或 Worker 触发通知。
3. 引用句柄与窗口上下文类（树状/点对点关系）
依赖页面之间的直接引用（父子、主从关系）。
-
**
window.open/window.opener+postMessage** -
机制：页面 1 通过
const win = window.open(...)持有页面 2 的窗口句柄，或页面 2 通过window.opener引用页面 1，直接调用targetWindow.postMessage()。 -
特点：
-
唯一支持跨域（Cross-Origin）通信的原生方案（配合安全的
targetOrigin校验）。 -
点对点通信精准。
-
限制：必须有明确的打开链路关系；一旦页面刷新或用户关闭重新进入，句柄引用就会断开。
4. 服务端中转类（跨设备 / 跨网段通用）
当多个页面不仅不同源，甚至位于不同浏览器、不同窗口或不同设备时。
- WebSocket / Server-Sent Events (SSE)
- 机制：页面均与后端网关建立长连接，后端根据用户标识进行房间级（Room）或会话级（Session）推送。
- 特点：无视同源策略限制，支持跨端/跨设备协同（如手机扫码登录、电脑端自动刷新）。
- 限制：需要后端配套支持，占用服务器连接资源。
选型决策矩阵
| 场景需求 | 最佳推荐方案 | 备选方案 |
|---|---|---|
| 现代浏览器 + 同源多 Tab 广播/同步 | BroadcastChannel | SharedWorker |
| 需要兼容老旧浏览器 | LocalStorage (storage 事件) | Cookie + setInterval 轮询 |
| 涉及不同域名（跨域）通信 | postMessage | 服务端 WebSocket 中转 |
| 需要统一管理后台长连接/状态汇聚 | SharedWorker | BroadcastChannel + 选举主控 Tab |
| 跨设备 / 跨浏览器会话同步 | WebSocket / SSE | HTTP 长轮询 |