四种跨浏览器窗口通讯

StorageEvent

Page 1

localStorage.setItem('message',JSON.stringify({
    message: '消息'，
    from: 'Page 1',
    date: Date.now()
}))
复制代码

Page 2

window.addEventListener("storage", function(e) {
    console.log(e.key, e.newValue, e.oldValue)
});
复制代码

如上， Page 1设置消息， Page 2注册storage事件，就能监听到数据的变化啦。

上面的e就是StorageEvent,有下面特有的属性（都是只读）：

• key ：代表属性名发生变化.当被clear()方法清除之后所有属性名变为null
• newValue：新添加进的值.当被clear()方法执行过或者键名已被删除时值为null
• oldValue：原始值.而被clear()方法执行过，或在设置新值之前并没有设置初始值时则返回null
• storageArea：被操作的storage对象
• url：key发生改变的对象所在文档的URL地址

Broadcast Channel

这玩意主要就是给多窗口用的，Service Woker也可以使用。 firefox,chrome, Opera均支持，有时候真的是很讨厌Safari，浏览器支持77%左右。

使用起来也很简单, 创建BroadcastChannel, 然后监听事件。 只需要注意一点，渠道名称一致就可以。
Page 1

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.postMessage('Hello, BroadcastChannel!')
复制代码

Page 2

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.addEventListener("message", function(ev) {
        console.log(ev.data)
    });