Vue跨标签页数据通信

跨标签页数据通信

在同一浏览器项目地址处于不同的标签页中,建立两个页面间的数据通信，即：B页面新增/修改数据;A页面表格自动更新数据

跨标签页通信常见方案:

BroadCast Channel (广播频道)
Service Worker
LocalStorage Window.onstorage监听
Shared Worker 定时器轮询
IndexedDB 定时器轮询
cookie 定时器轮询
Websocket
Window.open、Window.postmesAge

方案样例

BroadCast Channel(广播频道): 需要保证每个标签页使用同一个频道,比如下方的’sync-update’

创建文件：crossTagMsg.js(表示跨标签页的消息)

const channel = new BroadcastChannel('sync-update');
export function sendMsg(type, content) {
   
   
channel.postMessage({
   
   
type,
content,
});
}
export