在前端开发中，经常需要实现选项卡或窗口之间的通信。比如，在网页中打开多个选项卡，其中一个选项卡的操作会影响到其他选项卡。本文将介绍几种实现选项卡或窗口之间通信的方法，并提供示例代码。
1. 使用 localStorage
localStorage 是 HTML5 提供的一种本地存储机制，可以让我们在浏览器中保存键值对数据。它可以在不同的选项卡或窗口之间共享数据，因此可以用来实现选项卡或窗口之间的通信。
下面是一个简单的示例，演示了如何使用 localStorage 在两个选项卡之间共享数据：
// 在第一个选项卡中设置数据
localStorage.setItem('data', 'hello from tab 1');
// 在第二个选项卡中获取数据
const data = localStorage.getItem('data');
console.log(data); // 输出：'hello from tab 1'上述代码中，我们在第一个选项卡中设置了键为 data 的数据，然后在第二个选项卡中获取了该数据。由于使用了同一份 localStorage，所以第二个选项卡中也能看到第一个选项卡中设置的数据。
需要注意的是，localStorage 存储的数据类型只能是字符串类型。如果要存储其他类型的数据，需要先将其转换为字符串形式。
2. 使用 Broadcast Channel
Broadcast Channel 是一个可以在不同的窗口或选项卡之间发送消息的 API。它是 HTML5 新增的功能，能够让我们更方便地实现选项卡或窗口之间的通信。
下面是一个使用 Broadcast Channel 实现选项卡之间通信的示例代码：
-- -------------------- ---- ------- -- ---------- --------- ------- ----- ------- - --- ------------------------------- -- ---------- --------- ------- --- ----------------------------------- ----- -- - ------------------------ -- --------- ---- --- -- --- -- ------------ -------------------------- ---- --- ----
上述代码中，我们在第一个选项卡中创建了一个名为 my-channel 的 Broadcast Channel，并向其中发送了一条消息。在第二个选项卡中，我们监听了该 Broadcast Channel，当收到消息时，就会输出该消息的内容。
需要注意的是，Broadcast Channel 只能在同源的窗口或选项卡之间传递消息。
3. 使用 postMessage
postMessage 是 JavaScript 提供的一个 API，可以用来在不同的窗口或选项卡之间传递消息。与 Broadcast Channel 不同，postMessage 可以在跨域的窗口或选项卡之间传递消息。
下面是一个使用 postMessage 实现选项卡之间通信的示例代码：
// 在第一个选项卡中监听消息
window.addEventListener('message', event => {
if (event.origin !== window.location.origin) return; // 验证消息来源
console.log(event.data); // 输出：'hello from tab 1'
});
// 在第一个选项卡中向第二个选项卡发送消息
window.parent.postMessage('hello from tab 1', '*');上述代码中，我们在第一个选项卡中监听了 message 事件，并在收到消息时输出该消息的内容。然后，我们使用 window.parent.postMessage 向父窗口（即包含当前网页的窗口）发送了一条消息。
需要注意的是，当使用 postMessage 传递消息时，我们需要验证消息的来源，以确保消息不被恶意篡改或伪造。
总结
本文介绍了三种实现选项卡或窗口之间通信的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13863