浏览器悄悄上线了这个 API，让跨标签页通信变得轻而易举
在现代 Web 开发中，跨浏览器标签页通信一直是一个常见需求。例如，用户在一个标签页登录，其他标签页也需要实时更新状态。过去，开发者常用 localStorage + onstorage 事件 来实现，但这种方式存在天然局限：
- 本质上 localStorage 是存储，不是通信工具
- API 不直观，逻辑容易复杂
- 仅支持简单数据类型，复杂数据需要手动序列化
幸运的是，现代浏览器已经推出了 BroadcastChannel API，为同源跨标签页通信提供了一个 专门、高效且易用的解决方案。
什么是 BroadcastChannel？
BroadcastChannel 是一种 同源通信 API，允许同一域名下的不同上下文（标签页、窗口、iframe）互相广播消息。它的核心特点包括：
- 同源限制：确保通信安全
- 发布/订阅模式：角色可以互换，任何加入频道的页面都可发送或接收消息
- 支持复杂数据：对象、数组、Map、Set、File 等，浏览器自动序列化和反序列化
- 简洁高效：无需 hack localStorage，专为跨标签页通信设计
使用 BroadcastChannel 的四个步骤
1. 创建或加入一个频道
所有希望通信的页面必须使用相同的频道名称。创建实例时，如果频道已存在，则自动加入；否则会创建新频道。
// 创建一个名为 'user_status_channel' 的频道
const channel = new BroadcastChannel('user_status_channel');
2. 发送消息
使用 postMessage() 方法向频道广播消息。广播的消息可以是任意复杂数据结构。
channel.postMessage({
type: 'login',
user: { id: 123, name: 'Alice' }
});
✅ 支持的数据类型包括对象、数组、Map、Set、File 等，浏览器会自动序列化，无需手动处理。
3. 接收消息
通过监听 message 事件获取消息内容。事件对象中的 data 属性即为发送方传递的数据。
channel.onmessage = (event) => {
console.log('收到消息:', event.data);
if (event.data?.type === 'login') {
updateUIForLogin(event.data.user);
} else if (event.data?.type === 'logout') {
updateUIForLogout();
}
};
// 或者使用 addEventListener
// channel.addEventListener('message', (event) => { ... });
4. 关闭频道
当页面不再需要发送或接收消息时，应调用 close() 方法释放资源。
// 页面关闭或组件卸载时
window.onunload = () => {
channel.close();
};
// 在 React/Vue 中可在组件卸载生命周期中调用
// useEffect(() => {
// return () => channel.close();
// }, []);
BroadcastChannel 的优势
- 专为通信设计：比 localStorage hack 更直观、稳定
- 高效性能：消息广播基于事件，无轮询开销
- 支持复杂数据：无需手动序列化和反序列化
- API 简洁：创建、发送、接收、关闭，四步即可完成跨标签页通信
注意：兼容性方面，只要不使用 IE，即可放心使用。
总结
BroadcastChannel API 是现代 Web 实现 同源跨标签页通信的标准方案。它取代了过去依赖 localStorage 的 hack 方法，让代码更简洁、逻辑更清晰、性能更优。无论是登录状态同步、购物车同步，还是多标签页实时协作，都可以轻松胜任。