跨浏览器标签页通信有四种主流方案：1. localStorage+storage事件（兼容IE8+，轻量但仅支持字符串）；2. BroadcastChannel API（现代首选，支持任意序列化值且无副作用）；3. SharedWorker（适合复杂协同场景，IE不支持）；4. URL hash/history.state（仅限低频UI状态同步）。
跨浏览器标签页通信，核心在于让同一域名下不同标签页（甚至不同窗口）共享状态或传递消息。由于每个标签页是独立的 JavaScript 执行环境，无法直接访问彼此变量，必须借助浏览器提供的共享机制。关键不是“能不能”，而是“选哪种机制更稳定、兼容、可控”。
使用 localStorage + storage 事件监听
这是最轻量、兼容性最好的方案（IE8+ 支持）。原理是：一个标签页写入 localStorage，其他同源标签页会触发 storage 事件——即使写入操作发生在当前页，也不会触发自身事件，只通知其他页。
注意点：
- 只能传字符串，需自行序列化（如 JSON.stringify）和反序列化
- storage 事件的 event.key 和 event.newValue 是唯一可靠数据来源；event.oldValue 在 Safari 中可能为 null，不可依赖
- 避免高频写入，否则可能丢失事件（尤其在页面快速切换或后台运行时）
- 推荐加前缀（如 __msg_）区分业务 key，防止与其他存储冲突
利用 BroadcastChannel API（现代首选）
Chrome 54+、Firefox 38+、Edge 79+、Safari 15.4+ 原生支持，语义清晰、专为跨上下文通信设计。创建同名 channel 即可自动连接所有同源标签页。
立即学习“Java免费学习笔记（深入）”；
优势明显：
- 支持任意可序列化值（Object、Array、Date 等），无需手动 JSON 处理
- 有明确的 message 和 messageerror 事件，错误边界清晰
- 支持 close() 主动释放资源，避免内存泄漏
- 不污染 localStorage，无持久化副作用
兼容性不足时可用 localStorage + storage 回退，封装成统一接口即可。
借助 SharedWorker 实现中转通信
SharedWorker 是一个独立于页面的长期运行脚本，所有同源页面均可连接它。适合需要复杂状态管理、消息路由或服务端式中转的场景。
典型用法：
- 各页面通过 new SharedWorker('worker.js') 连接
- 页面用 port.postMessage() 发送消息，SharedWorker 的 onconnect 捕获连接并建立 port 通道
- Worker 内可广播消息、做去重、缓存、权限校验等逻辑
缺点是 IE 完全不支持，且调试较麻烦；但对需要强一致性或多页协同的场景（如多人协作编辑状态同步），它比 BroadcastChannel 更可控。
URL hash 或 history.state 辅助同步（有限场景）
不适用于实时通信，但在某些 UI 状态同步中很实用：比如点击导航按钮后，主动更新 location.hash 或调用 history.replaceState()，其他标签页监听 hashchange 或 popstate 事件响应。
适用特点：
- 仅适合低频、用户可见的状态（如当前选中的 tab、折叠面板展开状态）
- 天然支持浏览器前进/后退，且刷新不丢失
- 无需额外存储或通道，零依赖
- 注意避免循环触发（如 A 页改 hash → B 页监听后也改 hash → A 页再监听…）
不复杂但容易忽略：无论用哪种方式，都要考虑页面卸载时清理监听器（removeEventListener）、关闭 channel 或断开 port，否则可能引发内存泄漏或异常事件触发。
