1、项目场景

同浏览器下的两个窗口分别开着项目的两个页面A、B，点击A窗口页面的某个按钮，实现B窗口下页面数据的刷新。

2、实现方案

2.1 使用BroadcastChannel实现

BroadcastChannel ，广播频道，允许统一来源下不同文档(在不同的窗口、选项卡、iframe)之间进行通信。内容发布后，创建该频道的所有文档都能接收到数据。
使用：
(1) 创建BroadcastChannel实体，并通过name添加频道唯一标识
(2) 发布消息,使用postMessage(obj)方法
(3) 当结束之后关闭连接，使用close()方法，允许垃圾回收

 let channel = new BroadcastChannel('test_channel'); // 创建BroadcastChannel实体，name为test_channel
 let data = "使用BroadcastChannel实现"
 channel.postMessage(data) // 发送消息
 channel.close(); //关闭连接

(4) 其他页面接收时需要创建相同标识的BroadcastChannel实体，使用onmessage方法

let channel = new BroadcastChannel('test_channel');
    channel.onmessage = (event) =>{
      console.log(event)
      this.test = event.data
      this.handleClick()  // 注意，虽然能动态改变另一个浏览器的数据，但是不能触发另一个浏览器的方法
    }

备注:
(1) 每一种通道可以发布一种或者多种数据，一个页面可以存在多个通道。
(2) 当通道不需要时，需要手动关闭，使用close()，允许垃圾回收
(3) 跨浏览器时有问题。比如chrome中打开一个窗口，IE打开一个窗口，尝试后不能该改变数据
(4) 可以动态修改另一个浏览器的数据并渲染。如果另一个浏览器窗口使用onmessage接收到数据后调用自己的方法，这个方法不会立即触发。只有鼠标点到另一个浏览器后才会触发。
(5) 可以传对象，接收也是对象。接收到对象数组不需要转换。
(6) 需要满足同源策略。
(7) 使用简单，只要初始化实例后，传入相同的频道值，就会被接入到相同得广播频道中。
(8) BroadcastChannel存在浏览器的兼容问题，只支持版本较新的Chrome和Firefox,不支持IE和Safari具体兼容见下图。

BroadcastChannel详细api地址：https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

2.2 localstorage

localstorage 浏览器多个标签公用的存储空间，可以实现多页签之间的通信。(sessionstorage是会话级别的存储空间，用于单页面)
使用：
(1) A页面设置locastorage,B页面使用addEventListener去监听localstorage
A页面设置：

let data = "使用localstorage存储2"
window.sessionStorage.setItem("msg",data)

B页面设置：

window.addEventListener("storage", (evt) =>{
     if(evt.key == 'msg') {
       console.log(evt.newValue)
       this.storage_session = evt.newValue
     }
   })

备注：
(1) localstorage如果不手动清除是不会消失的，需要手动清除。
(2) 如果B页面打开，B页面会监听到所有“storage”变化的数据，evt中有对应storage的key
，可以进行针对性的判断。当localstorage的某值比较上一次没有变化时，即使set也不会触发。当自身页面通过set设置localstorage的值的时候，并不能监听。
(3) localstorage默认存储的是字符串，对于json数据需要使用stringfiy()、parse()方法；对于[[]]需要通过代码进行数据转换。如果数据量较大会出现页面卡死的情况。

cookie,当一个页面设置cookie后，能被另一个页面访问。代码实现上需要监听cookie的数据变化，然后再设置响应

setInterval(() =>{
    // 获取cookie
}, 1000)

备注：
(1) cookie存储空间有限，存储内容少
(2) 定时需要考虑时间上的设置，时间过大影响时效性，时间过小影响浏览器使用。不推荐使用。

2.4 SharedWorker

web worker中的共享线程。相比于专线线程，可以用于同浏览器下多页面的通信。使用上对VUE页面

下一篇

Sass