浏览器多页标签通讯

前言

文章开始之前我先解释一下什么是浏览器标签页面之间通信，通俗点讲就是我在浏览器中开了多个窗口，在其中一个窗口做了一些行为等其它的窗口不用刷新也能有相关表现。比如我在浏览器开一个商品信息窗口，一个购物车窗口，我在商品信息窗口某个商品上点击加入购物车，购物车窗口中就自动多出一个商品，不用去手动刷新，这就是两个标签页面之间的通信，那么怎么实现呢？有四种方式(我目前就知道这么多)，接下来我就一一演示并详细解释其原理。

浏览器localStorage

localStorage.setItem设置数据
在另一个标签页监听window上 storage事件

   window.addEventListener("storage",function(){
      
    });

缺点：

1、localStorage是h5的属性，高版本的浏览器才支持，而且不同浏览器localStorage大小了限制不统一。
2、localStorage只能监听非己页面的数据变化。

优点：
解决了cookie容量小和时效性的问题。

cookie + setInterval

document.cookie 发数据
setInterval不停的去取数据

缺点：

cookie空间有限，浏览器在每一个域名下最多能设置30-50个cookie，容量最多为4k左右。
每次HHTP请求才会把当前域的cookie发送到服务器上，包括只在本地才用到的而服务器不用的，浪费带宽。
setInterval频率设置过大会影响浏览器的性能，过小会影响时效性。

webSocket

webSocket实现双工通讯的方式，多页签可以将服务器作为桥梁来实现通讯

• h5新技术 共享worker shareWorker实现

    //建立到服务端webSocket连接
    var ws = new WebSocket("ws://localhost:8080");
    //当连接被打开时，注册接收消息的处理函数
    ws.onopen=function(event) {
      //当有消息发过来时，就将消息放到显示元素上
      ws.onmessage=function(event) {
        recMsg.innerHTML=event.data;
      }
    }

缺点：
1、它需要服务端的支持才能完成任务。如果socket数据量比较大的话，会严重消耗服务器的资源。
2、必须要在服务端项目中写服务端监听程序才能支持。

优点：
使用简单（客户端简单，服务端苦逼了），功能灵活、强大，如果部署了WebSocket服务器，可以实现很多实时的功能

SharedWorker方式

WebWorker的升级版，WebWorker只能在一个窗口内使用，而现在我们需求是多个窗口之间通信，就要用SharedWorker了。
SharedWorker原理和WebWorker几乎是一样的，只不过SharedWorker可以跨多个页面使用。
SharedWorker也是纯客户端的，没有服务端的参与。
SharedWorker在客户端有一个自己维护的对象worker.js，消息存储在worker.js中的data中
SharedWorker不如localStorage的是接收消息不是自动的，也要用定时器实时从worker.js中获取消息。