前端Broadcast Channel API的简单使用
Broadcast Channel API 是一个用于在不同窗口或标签页之间进行通信的 API。它允许一个页面向另一个页面发送消息，这些页面可以在同一浏览器实例中打开，或者在不同的浏览器实例中打开。
以下是 Broadcast Channel API 的简单使用步骤：
1.创建广播频道： 在发送消息的页面中，首先需要创建一个 Broadcast Channel，可以使用 new BroadcastChannel(channelName) 构造函数。channelName 是频道的名称，所有使用相同名称的页面都能收到彼此的消息。
// 发送消息的页面
const channel = new BroadcastChannel('myChannel');
2.发送消息： 通过广播频道发送消息。可以使用 postMessage 方法来发送任意数据。
// 发送消息的页面
const message = 'Hello from Page 1!';
channel.postMessage(message);
3.接收消息： 在接收消息的页面中，同样需要创建一个同名的广播频道，并通过 addEventListener 监听消息事件。
// 接收消息的页面
const channel = new BroadcastChannel('myChannel');
//使用方法一：
handleMessage(event) {console.log('Received message:', event.data);
}
channel.addEventListener('message', handleMessage);
//使用方法二：
bc.onmessage = (event) => {console.log('Received message:', event.data);
};
4.关闭频道： 当不再需要广播频道时，最好在页面关闭或不再需要通信的时候移除监听器，以释放资源。
切记最好在页面关闭或不再需要通信的时候移除监听器，否则重新进入页面时会再次创建一个监听器，上次创建的监听器还存在，这样的话每次进入页面都会创建一个。
//方式一的移除
bc.onmessage=null;
//方式二的关闭和移除
channel.close();
channel.removeEventListener('message', handleMessage);
请注意，使用 Broadcast Channel API 的两个页面必须在同一协议（http 或 https）下，否则无法进行通信。此外，同一页面打开多个标签页也可以通过 Broadcast Channel 进行通信。
这是 Broadcast Channel API 的基本用法，你可以根据需要在不同页面之间传递更复杂的数据。这对于在单页应用程序中或多个窗口之间共享状态非常有用。
5.完整示例
（1）发送消息的页面：
<template><div class="app-container"><input type="text" v-model="message" placeholder="请输入要发送的消息"><button @click="sendMessage">发送</button></div>
</template>
<script>
export default {data() {return {message: ""};},methods: {sendMessage() {// 创建一个名为 "example-channel" 的 Broadcast Channelconst channel = new BroadcastChannel('example-channel');// 发送消息到频道channel.postMessage(this.message);// 发送完消息后关闭频道channel.close();// 清空消息输入框this.message = '';}}
}
</script>
（2）接收消息的页面：
<template><div class="app-container"><p>接收到的消息: {{ receivedMessage }}</p></div>
</template>
<script>
export default {data() {return {receivedMessage: ""};},methods: {handleReceivedMessage(event) {this.receivedMessage = event.data;}},mounted() {const channel = new BroadcastChannel('example-channel');// 添加事件监听器channel.addEventListener('message', this.handleReceivedMessage);},beforeDestroy() {const channel = new BroadcastChannel('example-channel');// 移除事件监听器channel.removeEventListener('message', this.handleReceivedMessage);}
}
</script>
在这个示例中，我们在Vue实例的 mounted 生命周期钩子中使用 addEventListener 添加了一个名为 “example-channel” 的 Broadcast Channel 的 message 事件监听器。在 beforeDestroy 钩子中，我们使用 removeEventListener 移除了相同的事件监听器，以避免在组件销毁时引起内存泄漏。
这种方式相对于直接使用 channel.onmessage 更符合 Vue 组件的生命周期管理，确保在组件销毁前正确地移除了事件监听器。
文章参考：
vue一个页面改变cookie的值，另一个页面怎么同步监测cookie值的变化，并更新页面数据
)
