写在前面
今天说一下跨标签通信的一种实现方式,首先跨标签指的是同一个浏览器中不同标签之间进行数据通信,也就是说比如在第一个标签写了一个数据,在另一个标签里面进行数据的使用,而且是实时的
先说现象
当我点击发送消息给标签二的时候,标签二就立刻收到了发送的消息内容,并渲染到页面上,这是现象
为什么不用 vuex 或者是 pinia
使用这些的前提是单页面单标签的使用,是不涉及到多标签的,所以他们的数据在不同标签之间也是不共享的
为什么不用 localStorage
因为localStorage是共享,但是不是实时的,无法做到页面不刷新就更新数据的目的
实现方案之一:BroadcastChannel
MDN-BroadcastChannel
他的实现过程是很简单的,通过一个实例发送一条广播出去,这个时候浏览器可以通过监听消息的方式进行获取对应的实例的消息内容,如果不想监听了,就直接调用他自己的方法进行关闭即可
代码实现
代码语言:javascript复制// TODO: 创建一个BroadcastChannel的实例
const BC = new BroadcastChannel('tagCommunication-channel')
/**
* TODO: 发送消息给所有的监听标签页
* @param {any} 广播消息的内容
*/
const sendMessages = (obj = {}) => {
console.log("