浏览器跨标签页通信

过去，最常见的就是利用 localStorage 的 onstorage 事件监听来处理跨浏览器标签页通信，但其本职是存储，通信只是其副作用，且 API 不够直观。

现代浏览器已经为我们提供了一个专门为此场景设计的、更优雅、更高效的解决方案。

什么是 BroadcastChannel？
BroadcastChannel API 允许来自同源的浏览器不同上下文（如标签页、窗口、iframe）之间进行通信。

其核心特点是：同源限制、发布/订阅模式且角色可以互换、基于消息事件对高效通信、支持复杂数据，无需手动序列化。

它的 API 非常简洁，主要包含创建、发送、接收

1. 创建或加入一个频道
要进行通信，首先需要创建一个 BroadcastChannel 实例，并给它指定一个唯一的频道名称。所有希望通信的页面都必须使用相同的频道名称。

// 创建一个名为 'user_status_channel' 的频道
const channel = new BroadcastChannel('user_status_channel');

如果名为 user_status_channel 的频道已存在，这行代码会加入该频道；如果不存在，则会创建它。

和关闭四个步骤。

2. 发送消息
创建实例后，使用 postMessage() 方法向频道广播消息。所有监听该频道的其他标签页都会收到此消息。

postMessage() 的强大之处在于它可以发送各种复杂的数据结构，包括对象、数组、Map、Set、File 对象等，浏览器会自动处理序列化和反序列化。

3. 接收消息
通过监听 message 事件来接收广播。事件对象 event 中包含了我们最关心的 data 属性，也就是发送方传递的消息。

channel.onmessage = (event) => {
 console.log('收到消息:', event.data);

 // 根据消息内容执行相应操作
 if (event.data && event.data.type === 'login') {
    updateUIForLogin(event.data.user);
  } else if (event.data && event.data.type === 'logout') {
    updateUIForLogout();
  }
};

// 也可以使用 addEventListener
// channel.addEventListener('message', (event) => { ... });

　　

4. 关闭频道
当页面不再需要接收或发送消息时（例如，在组件卸载或页面关闭时），应该调用 close() 方法来关闭频道，以释放资源。

// 当组件销毁或页面关闭时
window.onunload = () => {
channel.close();
};

// 在 React 或 Vue 等框架中，可以在组件的卸载生命周期函数中调用
// useEffect(() => {
// return () => channel.close();
// }, []);

　　

BroadcastChannel API 是实现同源跨标签页通信的现代化标准方案，具有简洁的 API、强大的功能和优秀的性能，完美地解决了 localStorage hack 方案的各种痛点。

至于兼容性，只要不用 IE 就行。

原文链接：https://blog.csdn.net/qq_33546296/article/details/149716088