如何实现浏览器内多个标签的通信

实现多个标签通信，本质上是通过中介者模式实现，因为标签页直接没有办法直接通信，因此可找一个中介者来让标签页和中介者通信，然后让这个中介者进行消息转发

1. 使用Websocket，通信的标签页连接同一个服务器，发送到服务器后，服务器推送消息到所有连接的客户端

   developer.mozilla.org/zh-CN/docs/…

2. 调用localStorage， localStorage在另一个浏览器上下文里被添加、修改、删除时，他都会触发一个storage事件，我们可以通过监听storage事件，控制它的值，进行页面直接通信

   1、在同源的两个页面中，可以监听 storage 事件

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

   2. 其中一个页面中

   localStorage.setItem("key","hello");
   

3. 如果能够获得对应标签页的引用，通过postMessage方法也是可以实现多个标签页通信

   developer.mozilla.org/zh-CN/docs/…