1、基本概念
BroadcastChannel接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象——简单来说就是多窗口通信。
2、多窗口通信方案介绍
2.1、BroadcastChannel：
之前介绍过的 BroadcastChannel 是一种原生的浏览器 API，用于在不同窗口之间进行实时通信。它具有跨浏览器兼容性和简单易用性的优势，但限于同一浏览器的窗口间通信。
优势：
跨浏览器兼容性：BroadcastChannel 在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 等。
简单易用性：使用 BroadcastChannel 只需几行代码，无需复杂的设置和配置。
实时性：消息几乎可以即时地在各个窗口之间传递，使得实时通信更加流畅和高效。
局限性：
仅限同一浏览器：BroadcastChannel 仅适用于同一浏览器的窗口之间通信，不支持跨浏览器通信。
2.2、postMessage：
优势：
跨窗口通信：postMessage 可以在不同窗口之间进行通信，包括不同的浏览器和跨域窗口。
灵活性：可以使用 postMessage 在窗口之间传递复杂的数据对象，甚至可以传递文件和媒体。
局限性：
安全性：由于 postMessage 允许与任意窗口通信，需要谨慎处理，以防止恶意窗口进行滥用。
复杂性：使用 postMessage 需要处理消息的来源和目标窗口，可能需要更多的代码和逻辑。
2.3、本地存储方案（LocalStorage 或 IndexedDB）：
优势：
简单易用性：使用本地存储方案相对简单，无需额外的 API 或配置。
跨浏览器兼容性：LocalStorage 和 IndexedDB 在现代浏览器中得到广泛支持，跨浏览器兼容性较好。
局限性：
实时性有限：LocalStorage 和 IndexedDB 的实时性受限，通信不如 BroadcastChannel 和 PostMessage 那么即时。
容量限制：LocalStorage 和 IndexedDB 都有存储容量的限制，适合小规模数据的通信。
3、浏览器兼容性
3.1、BroadcastChannel
3.2、postMessage
3.3、本地存储
4、火速实操
// 发送消息加入以下代码
const channel = new BroadcastChannel('test');
channel.postMessage('这是一个测试的消息');
// 接收消息加入以下代码
channel.addEventListener('message', event => {
console.log('来活儿了:', event.data);
});
通过以上代码，您可以在不同窗口间建立通信通道，并实时发送和接收消息。当然在你不需要的时候记得关闭他使用channel.close()即可
// 发送消息
const targetWindow = window.open('https://test.suanshubang.cc/test/misx');
targetWindow.postMessage({ type: 'misxProSaveReady', value: 1 }, '*')
// 接收消息
window.addEventListener('message', (e) => {
console.log(e.data)
})
postMessage基础示例，处于安全性考虑可能会加入判断消息来源此类的逻辑，这里就不在演示。
// 发送消息
localStorage.setItem('message', '这是存储的消息');
// 接收消息
window.addEventListener('storage', event => {
if (event.key === 'message') {
console.log('Received message:', event.newValue);
}
});
5、思考
多窗口通信能给我们带来什么好处？
1、实时更新：
通过多窗口通信，用户可以在不同窗口间实时更新数据和信息。例如，在一个窗口中进行的操作可以立即反映在其他窗口中，提供即时的数据同步和反馈。
2、共享状态和数据：
多窗口通信可以实现共享状态和数据的能力。用户在一个窗口中的操作和输入可以传递给其他窗口，从而实现多个窗口间的协作和共享数据，提供一致的使用体验。
3、跨设备同步：
多窗口通信还可以支持跨设备的同步。用户可以在不同设备上打开不同窗口，并通过通信机制将数据同步到各个设备上，使得用户可以无缝切换设备并继续进行工作或任务。
4、增强用户体验：
多窗口通信可以增强用户的整体体验和交互效果。用户可以更灵活地组织和管理窗口，实现个性化的工作环境，提高工作效率和舒适度。
