JS 跨标签页或窗口通信

1、方法一

localStorage
发送端设置localstorage值

window.localStorage.setItem('msg', JSON.stringify(data));

接收端监听storage变化

 window.addEventListener('storage', function(data) {
    console.log(data);
});

优点
1、兼容性强；
2、方法简单；
3、发送信息的窗口不会触发监听事件；
4、可以时间祖孙之间的数据传输；
缺点
1、必须同域，不可跨域；
2、数据大小有限制，与localStorage有关，不同的浏览器不一样，一般5M；
3、数据安全性地；
4、只有数据改变了才能监听到；
5、存储数据类型只能是字符串，引用类型会转化为相应的数据类型，比如对象存储的是[object Object]；

方法二

SharedWorker
sharedWorker.js 中央转发类
共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。

// 收集每一个端口
let ports = [];
this.onconnect = function (e) {
    let port = e.ports[0];
    port.start();
    ports.push(port);
    // 监听并分发数据
    port.addEventListener('message', function(e) {
        for (let p of ports) {
            p.postMessage(e.data);
        }
    });
}

发送端

 let worker = new SharedWorker('sharedWorker.js');
 worker.port.start();
 let data = {
    id: Math.random()
 }
worker.port.postMessage(data);

接收端

let worker = new SharedWorker('sharedWorker.js');
worker.port.start();
worker.port.onmessage = function (val) {
    console.log(val)
}

优点
1、对数据类型传输没有限制；
2、可祖孙之间传递数据；
缺点：
1、兼容性低，与worker类似；
2、编写有点困难；

方法三

postMessage
这种需要打开一个页面或通过iframe，常用于iframe中使用；
发送端

<iframe id="iframe" src="./iframe1.html" ></iframe>      document.getElementById('iframe').contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');

接受端

window.addEventListener('message', function(e) {
    console.log(11111)
});

优点
1、可跨域传递数据；
2、对数据类型传输无限制；
缺点：
1、发送窗口也能监听到；
2、只能父子间传递；
3、只能旧的窗口发送信息，新窗口接受信息；不可反过来；

方法四

webSocket
需要有后端服务支持，比如node.js

let ws = new WebSocket('ws://xxxx');

ws.send('发送信息');

接受端

ws.onmessage = function(event) {
	console.log(event);
}

优点：
1、可跨端使用；
2、后端可以控制是否对哪一个设备发送消息；
缺点：
1、需要前后端需要一直保持通讯；