前端跨页面通信：Broadcast Channel

虽然日常开发并不常见，偶尔还是会闪现这样一个需求： 一个项目同时打开了两个页面，一个页面的某个操作我想让另一个页面也同时响应；比如商品列表页面点击收藏按钮，这个商品详情页面的收藏图标也同时变成确定状态；类似这种操作今天来分享一个非常简单的跨页面通信方法： Broadcast Channel；

BroadcastChannel，就字面意思来言，叫做“广播频道”，官方文档说，该API是用于同源不同页面之间完成通信的功能

一、与postMessage区别：

它与postMessage的区别就是：BroadcastChannel只能用于同源的页面之间进行通信，而postMessage却可以用于任何的页面之间的通信，换句话说，BroadcastChannel可以认为是postMessage的一个实例，它承担了postMessage的一个方面的功能。

二、浏览器支持：

再来看看BroadcastChannel的浏览器支持情况吧，这个才是每个前端们最关心的问题：

三、 BroadcastChannel的使用方法：

首先我们先要初始化一下BroadcastChannel：

const setChannel = new BroadcastChannel('demos');

传入一个string,用这个来标识BroadcastChannel

发送消息： 发送消息的话使用它的postMessage方法，但是记住在使用的页面也要初始化BroadcastChannel：

setChannel.postMessage('要发送消息啦啦啦啦啦啦啦');

监听消息： 要想监听方法的话使用onmessage方法来获取：

setChannel.onmessage =function(e) {

    console.log('接收到消息:', e.data);

    //一大波你要要的操作

};

关闭连接：

setChannel..close();

收工！