JavaScript实现跨标签页通信

一、localStorage

通过 localStorage 结合 window.addEventListener('storage', cb) 完成 A、B 标签页间通信。

// A标签页
localStorage.setItem('send-msg', JSON.stringify({
    name: 'hzd',
    age: '18',
}))

// B标签页
window.addEventListener('storage', (data) => {
    try {
        console.log(data)
        const msg = JSON.parse(data.newValue)
    } catch (err) {
        // 处理错误
    }
})

二、BroadcastChannel

Broadcast Channel API 表示一个命名频道，给定来源的任何浏览上下文都可以订阅该频道。它允许同一来源的不同文档（在不同窗口、选项卡、框架或 iframe 中）之间进行通信。

// A页面
const bc = new BroadcastChannel("test_channel");
bc.postMessage("This is a test message.");


// B页面
const bc = new BroadcastChannel("test_channel");
bc.onmessage = (event) => {
  console.log(event);
};

三、postMessage

postMessage 是 H5 引入的 API，该方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

// 发送端：
发送消息


// 接收端：

四、webSocket