浏览器多窗口通信技术

## 举个例子就是，假如一个浏览器打开了多个相同的窗口，其中某个窗口调用了编辑接口，数据更新了，其他的窗口数据怎么自动更新，不能手动刷新页面（很久之前面试遇到的一个问题，现在拓展记录一下）

• 同域：协议、域名、端口完全一致（如 http://localhost:8080 的两个标签页），大部分原生 API 可直接通信；
• 跨域：三者任一不同（如 http://a.com 和 http://b.com），仅少数 API 支持（需显式授权）

同域多窗口通信

1.LocalStorage 监听（最常用）

原理：

• 同域下，所有窗口共享 LocalStorage/SessionStorage 数据；
• 当 A 窗口修改存储数据时，浏览器会在其他同域窗口触发 storage 事件（当前修改窗口不触发），监听该事件即可获取数据

// 窗口A（编辑数据或其他更新操作后）
localStorage.setItem('dataUpdated', JSON.stringify({
  type: 'message',
  content: 'Hello 窗口B'
}));

// 窗口B（监听变化）
window.addEventListener('storage', (e) => {
    if (e.key === 'dataUpdated') {
        const data = JSON.parse(e.newValue);
        console.log('收到消息：', data.content); // 输出：Hello 窗口B
        // 重新获取数据
        refresh();
    }
});

2. BroadcastChannel API（广播频道）

原理：

• 多个同域窗口创建「同名广播频道」（如 new BroadcastChannel('my-channel')）；
• 任意窗口通过频道发送消息，所有订阅该频道的窗口都会收到（包括发送方自身）；
• 频道支持主动关闭，避免内存泄漏

// 窗口A
const channel = new BroadcastChannel('data-update');
channel.postMessage({ type: 'dataUpdated' });

//接收方 窗口B
const channel = new BroadcastChannel('data-update');
channel.onmessage = (e) => {
    if (e.data.type === 'dataUpdated') {
        refresh();
    }
};