前言
最近跨标签页数据传输这类功能点比较火，因为现在跨标签同步数据共享的需求越来越多了，所以大家伙也就都探讨这类功能点的实现方式。
今天我就在 Vue3 项目中，给大家演示一下纯前端如何实现跨标签通信：
1、BroadCast Channel
2、Service Worker
3、LocalStorage + onstorage
4、open + postMessage
我先准备一个基础页面，代码如下：
图片
并打开两个 Tab，以下都通过这两个 Tab 来进行代码演示：
图片
BroadCast Channel
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
其实关键就几个方法：
- postMessage： 发送消息
- onmessage： 接收消息
- close： 停止监听
图片
可以看到第二个 Tab 能接收到第一个 Tab 发出的消息。
图片
图片
那么我们现在可以用它来完成两边数据的同步了。
实现了我们想要的效果！
图片
图片
Service Worker
Service Worker 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的资源。它还提供入口以推送通知和访问后台同步 API。
首先在 public 文件夹下新建一个 sw.js。
图片
重点就是几个方法：
- register： 注册 Service Worker
- postMessage： 发送消息
- onmessage： 接收消息
首先在页面中注册这个 Service Worker，这样才能确保通过 Service Worker 来进行发消息和接收消息。
图片
图片
接下来进行消息发送和消息接收：
图片
达到了想要的同步效果：
图片
LocalStorage + onstorage
当我们在同域同源下，修改 LocalStorage 的时候，会触发同域同源下 window.onstorage 订阅函数。
我们可以利用这个特性，实现不同 Tab 之间的通信，代码如下：
图片
效果如下：
图片
open + postMessage
当你使用 window.open 打开另一个同源标签页时，可以使用 postMessage对这个新开的标签页进行通信，新标签页可以使用 addEventListener('message') 进行接收信息。
图片
可以达到我们想要的效果：
图片
