多标签页之间的通信

1、作用：在每个标签页之间实现互相通信、互相调用的功能。例如：打开了A,B,C三个标签页，在C页面把数据修改了，要通知A,B两个页面的数据也要更新到最新修改的数据。
2、实现方法
（1）localstroge，由于是浏览器多个标签共用的存储空间，所以可以用来实现多标签页之间的通信。
在前一个页面的window对象添加监听事件：
Window.addEventListener(“stroge”,function(event){
console.log(event);
},false);
注意：只能实现同一浏览器相同域名、相同协议、相同端口下的多个标签页之间的通信。
（2）cookie+setIntervel
在页面A设置一个使用setInterval定时器不断刷新，检查cookies的值是否发生变化，如果变化就进行刷新的操作。由于cookies是在同域可读的，所以在页面B审核的时候改变cookies的值，页面A是可以拿到的。
index.html

test.html

（3）html5的新特性SharedWorker
共享worker(SharedWorker),这种是可以多个标签页、iframe共同使用的。SharedWorke可以被多个window共同使用，但必须保证这些标签页都是同源的（相同的协议，主机和端口号）
首先新建一个js文件worker.js，具体代码如下：
// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ’ ’
onconnect = function (e) {
let port = e.ports[0]
port.onmessage = function (e) {
if (e.data === ‘get’) {
port.postMessage(data)
} else {
data = e.data
}
}
}

页面A发送数据给worker，然后打开页面B,调用window.worker.port.postMessage(‘get’),即可收到页面A发送给worker的数据。