Tab页跨页面通信

一. 要求的场景

在浏览器中我们打开同一个网站的多个标签页，假如我们打开了两个页面A和B,现在要求实现操作标签页A改变标签页B的对应部分。
那么像这要的需求我们需要怎么样去实现？
我能想到的也就有LocaStorage,Cookie。通过网上查找其他的大神的资料，发现还可以通过html5浏览器的新特性SharedWorker或者postMessage来实现。

二.方法实现

1. LocalStorage的实现

LocalStorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信，这里可能就会问道，既然LocalStorage可以实现那么SessionStorage可以实现吗？结果是不可以的，因为Session是会话级别的，是每个页面独有的。并且LocalStorage的实现必须遵循同源策略，只有同源的Tab页之间才能通过这种方式去通信。
但是单纯的使用LocalStorage方法来实现的话，会遇到一个问题，就是如何把握住交互的时机，很简单的打个比方，A页面需要给B页面发送一个一条数据，这个时候通过 localStorage.setItem('username','hanmeimei'),并且用setTimeout等待B页面的反馈，而B页面也需要设置setTimeout去等待localStorage中username字段的变化，如果获取到username字段，就取到了数据‘hanmeimei’，接而发送消息给A告诉A页面已经获取到了数据，而发送方法和以上一样。这样的方式及其的浪费性能，需要不停的监听localStorage的变化。
这里就介绍一种基于LocalStorage的新的方法，原理是一样的，但是监听的方法改变了，这里我们使用到H5提供的新的方法storage事件去监听localStorage的变化。

// A页面
window.addEventListener("storage", function (e) {
   
  if(e.