两个浏览器窗口间通信总结

版权声明： https://blog.csdn.net/huangpb123/article/details/85015097

1. localStorage

一个窗口更新 storage，另一个窗口监听 window 对象的 storage 事件，来实现通信。

注意：两个窗口要同源（URL的协议、域名、端口号都要相同）

// 本窗口更新storage
localStorage.setItem('name', 'jim');

// 其他窗口监听storage事件
window.addEventListener('storage', (e)=>{
    console.log('e', e)
    console.log('newValue', e.newValue)
})

2. WebSocket

所有的 WebSocket 都监听同一个服务器地址，利用 send 发送消息，利用 onmessage 获取消息的变化，不仅能跨窗口，还能跨浏览器，兼容性最佳，只是需要消耗点服务器资源。

let ws = new WebSocket('ws://localhost:3000/');
ws.onopen = (e) => {
    // 或者把此方法注册到其他事件中，即可与其他服务器通信
    ws.send({name: 'jim'}); // 通过服务器中转消息
}

ws.onmessage = (e) => {
    // 消费消息
    console.log(e.data);
}

更多WebSocket相关知识

3. postMessage

详情请见：postMessage

4. window.name

浏览器窗口有 window.name 属性。这个属性最大的特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页就可以读取它。

详情请见：window.name