跨浏览器选项卡通信

同源下不同选项卡之间进行数据通信的几种方式。

Web Storage API

通过监听localStorage的变化实现选项卡之间的通信。

Web Storage API

Demo

在一个选项卡中修改localStorage，设置key唯一：

window.localStorage.setItem('crossTabData', 'test');

其他选项卡监听localStorage的变化：

window.addEventListener('storage', (event) => {
    if(event.key === 'crossTabData'){
       console.log(event.newValue); // "test"
    }
})

event属性如下：

• key：被修改的键值。当被clear()方法清除之后该属性值为null

• newValue：修改后的新值。当被clear()方法清理后或者该键值对被移除，newValue的值为null

• oldValue：修改前的值。在设置新键值对时由于没有原始值，该属性值为null

• storageArea：被操作的storage对象

• url：key发生改变的对象所在文档的URL地址

注意点

• 在同一个页面内发生的改变不会触发监听事件——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会触发。在其他域名下的页面不能访问相同的Storage对象。

• Storage对象发生变化时（即创建/更新/删除数据项时），重复设置相同的键值不会触发StorageEvent事件，Storage.clear()方法至多触发一次StorageEvent事件。

• 不适用于通信大量数据，因为LocalStorage是同步的，会阻塞主线程。

Broadcast Channel API

Broadcast Channel API

Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab页，frame或者 iframe下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯。

兼容性：BroadcastChannel，IE和Safari不支持。

Demo

在一个选项卡中执行以下代码：

const channel = new BroadcastChannel('testChannel');

channel.postMessage({message: 'test'});

其他选项卡设置监听事件：

const channel = new BroadcastChannel('testChannel');

channel.addEventListener('message', (event) => {
    console.log(event.data); // {message: "test"}
});

关闭：

channel.close();