BroadcastChannel API 可实现同源页面间通信，通过创建相同频道名的实例并使用 postMessage 发送、onmessage 接收消息，适用于登录状态同步、数据刷新提示等场景，且需在页面卸载时调用 close() 释放资源，不支持环境可降级使用 localStorage + storage 事件或 SharedWorker。
Broadcast Channel API 是浏览器提供的一种简单机制，用于在同源的不同浏览器标签页、窗口或 iframe 之间进行实时通信。只要页面属于同一域名（协议、主机名、端口相同），就可以通过它发送和接收消息。
创建和使用 BroadcastChannel
要实现多标签页通信，首先需要在每个页面中创建一个共享的频道名称的 BroadcastChannel 实例。
示例代码如下：
// 所有页面中都使用相同的频道名称
const channel = new BroadcastChannel('my-channel');
// 发送消息
channel.postMessage('Hello from tab 1!');
// 接收消息
channel.onmessage = function(event) {
console.log('收到消息:', event.data);
};
只要任意标签页调用 postMessage，其他所有监听该频道的页面都会触发 onmessage 回调。
实际应用场景与处理建议
这种通信方式适合轻量级状态同步，比如用户登录状态变化、主题切换、通知提醒等。
- 登录状态通知：当一个标签页中用户退出登录，可通过 BroadcastChannel 通知其他标签页自动跳转到登录页。
- 数据刷新提示：在一个标签页中更新了用户资料，其他页面可监听并提示“检测到新数据，是否刷新？”
- 防重复操作：限制同一用户只能在一个标签页中执行敏感操作（如支付），其他页面监听后可禁用按钮。
注意：BroadcastChannel 不会将消息发给自身（即不会收到自己 post 的消息），这一点可以避免循环处理。
生命周期与资源管理
为避免内存泄漏和无效监听，应在适当时候关闭频道。
常见做法：
// 页面卸载时关闭频道
window.addEventListener('beforeunload', () => {
channel.close();
});
close() 表示不再接收消息，释放相关资源。虽然不手动关闭也不会导致严重问题，但良好习惯有助于维护大型应用的稳定性。
兼容性与降级方案
BroadcastChannel 在现代浏览器中支持良好（Chrome、Firefox、Edge 等），但在一些旧版本或移动端可能存在限制。
如果需要兼容不支持的环境，可考虑以下替代方式：
- localStorage + storage 事件：通过 setItem 触发 storage 事件，可在同源其他标签页监听。
- SharedWorker：更复杂但功能更强，适用于需要集中管理状态的场景。
storage 方式示例：
// 发送
localStorage.setItem('msg', JSON.stringify({type: 'logout'}));
// 监听
window.addEventListener('storage', (e) => {
if (e.key === 'msg') console.log('收到:', e.newValue);
});
基本上就这些。BroadcastChannel 使用简单，适合大多数跨标签通信需求，关键是统一频道名并合理处理消息内容结构。
