实现多个标签页之间通信的几种方法

websocket、setInterval+cookie、localstorage、SharedWorker和postMessage

1.localstorage

localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

2.SharedWorker

SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

3.websocket通讯

全双工（full-duplex）通信自然可以实现多个标签之间的通信

4.定时器setInterval+cookie

1.在页面A设置一个使用setInterval定时器不断刷新，检查Cookies的值是否发生变化，如果变化就进行刷新的操作。

2.由于Cookies是在同域可读的，所以在页面B审核的时候改变Cookies的值，页面A自然是可以拿到的。

这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。

5.postMessage

两个需要交互的tab页面具有依赖关系。

如 A页面中通过JavaScript的window.open打开B页面，或者B页面通过iframe嵌入至A页面，此种情形最简单，可以通过HTML5的 window.postMessage API完成通信，由于postMessage函数是绑定在 window 全局对象下，因此通信的页面中必须有一个页面（如A页面）可以获取另一个页面（如B页面）的window对象，这样才可以完成单向通信；B页面无需获取A页面的window对象，如果需要B页面对A页面的通信，只需要在B页面侦听message事件，获取事件中传递的source对象，该对象即为A页面window对象的引用：

//B页面
B页面

window.addEventListner('message',(e)=>{
    let {data,source,origin} = e;
    source.postMessage('message echo','/');
});

postMessage的第一个参数为消息实体，它是一个结构化对象，即可以通过“JSON.stringify和JSON.parse”函数还原的对象；第二个参数为消息发送范围选择器，设置为“/”意味着只发送消息给同源的页面，设置为“*”则发送全部页面。

参考文章：
https://juejin.im/post/5acdba01f265da23826e5633
https://juejin.im/post/5b0d0a3cf265da092767917f#heading-0
https://segmentfault.com/q/1010000006664804
https://juejin.im/post/59bb7080518825396f4f5177#heading-0
https://segmentfault.com/a/1190000011207317
https://blog.csdn.net/qq_34626003/article/details/70231078
https://www.cnblogs.com/chengdabelief/p/6686070.html
https://www.cnblogs.com/chengdabelief/p/6685917.html
https://www.jianshu.com/p/31facd4934d7