broadcastchannel可实现同源多标签页实时通信，需统一频道名、同源、合理收发与清理；支持结构化消息与事件监听，注意关闭频道防泄漏，并为隐私模式提供降级方案。

直接用 BroadcastChannel 就能实现同站点多标签页间的实时消息同步，关键在于频道名一致、同源、及时收发和合理清理。

创建同名频道是通信前提

所有需要互通的页面，必须使用完全相同的 channelName 初始化 BroadcastChannel：

• 比如统一写 new BroadcastChannel('app-sync')，不能一个写 'app-sync'，另一个写 'AppSync' 或带空格
• 频道名区分大小写，且不支持特殊字符（建议只用字母、数字、短横线）
• 只要协议、域名、端口三者完全一致，就算跨子域（如 https://a.example.com 和 https://b.example.com）也不行——它们不同源

发送与接收消息要成对设计

消息本身不限类型，但结构清晰才能方便处理：

• 推荐带 type 字段，比如 { type: 'LOGOUT', userId: 'u123' }，便于在监听函数中做条件分发
• 发送用 channel.postMessage()，支持对象、数组、Date、RegExp 等（无需 JSON.stringify）
• 接收推荐用 addEventListener('message', handler)，比 onmessage = handler 更灵活，也方便解绑
• 避免在监听回调里执行耗时操作（如大量 DOM 渲染或同步请求），否则可能阻塞后续消息

注意生命周期管理，防止内存泄漏

页面卸载前关闭频道，是良好实践：

• 在 beforeunload 或 Vue/React 组件销毁钩子中调用 channel.close()
• 不要反复 new 同名 channel 而不 close，会导致多个监听器叠加，消息被重复处理
• 隐私模式下（如 Safari 无痕窗口），BroadcastChannel 可能默认禁用，可加简单降级逻辑（比如 fallback 到 localStorage + storage 事件）

典型同步场景示例

比如用户在一个标签页登出，其他标签页需立即响应：

• 登出页执行：channel.postMessage({ type: 'AUTH_CHANGE', status: 'logged_out' })
• 各监听页收到后清除本地 token，并跳转登录页：localStorage.removeItem('token'); location.href = '/login'
• 若涉及状态更新（如购物车数量、主题切换），同样按 type 匹配，触发对应 UI 更新即可