BroadcastChannel API 可实现同源页面间高效通信，通过创建相同名称的频道实例并使用 postMessage 发送消息，addEventListener 或 onmessage 接收消息，需在 beforeunload 时调用 close 释放资源，适用于登录状态同步、主题切换等场景。
BroadcastChannel API 是浏览器提供的原生跨页面通信方案，只要页面同源（协议、域名、端口相同），就能通过广播机制交换数据。它比用 localStorage 监听 storage 事件更高效，也比 postMessage 不需要持有窗口引用，适合做多标签页之间的状态同步。
创建频道并收发消息
使用 BroadcastChannel 的第一步是创建一个指定名称的频道实例，所有想通信的页面都必须使用相同的频道名。
- 创建频道：
const channel = new BroadcastChannel('chat-room');，这里的 'chat-room' 就是频道标识。 - 发送消息：调用
postMessage()方法，可以传字符串、对象、数组等任何能被结构化克隆的数据。channel.postMessage({ type: 'NEW_MESSAGE', text: 'Hello!' }); - 接收消息：通过监听
message事件来获取其他页面发来的信息。channel.addEventListener('message', (event) => { console.log(event.data); });
也可以用onmessage属性赋值的方式：channel.onmessage = (event) => { /* 处理逻辑 */ };
处理消息来源与资源释放
在接收到消息时，可以通过 event.source 属性判断消息是从哪个浏览上下文发出的，比如是来自另一个 Window 还是 SharedWorker，这在复杂场景下有助于区分消息来源。
当某个页面或组件不再需要监听广播时，应当主动关闭频道以释放系统资源，避免内存泄漏。
立即学习“Java免费学习笔记（深入）”；
- 关闭频道：
channel.close(); - 最佳实践是在页面卸载前调用 close，例如：
window.addEventListener('beforeunload', () => { channel.close(); });
典型应用场景
BroadcastChannel 特别适合那些需要在多个标签页间保持状态一致的功能。
- 用户登录状态同步：在一个标签页登录后，通知其他所有标签页更新 UI，无需刷新。
- 主题切换联动：用户在 A 标签页切换了深色模式，B 标签页立即响应并改变主题。
- 共享数据缓存失效：当一个页面修改了关键配置，通过广播通知其他页面清空本地缓存。
- 简易协作提示：如多标签页编辑同一内容时，提示“其他窗口正在操作”。
