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(表示跨标签页的消息)

javascript 复制代码
const channel = new BroadcastChannel('sync-update');
export function sendMsg(type, content) {
channel.postMessage({
type,
content,
});
}
export function listenMsg(callback) {
const handler = (e) => {
callback && callback(e.data);
} 
channel.addEventListener('message', handler);
return () => {
channel.removeEventListener('message', handler);
};
}

新增/编辑页面add/edit.vue

javascript 复制代码
// emp.value 这是个代理对象,无法被克隆,需要把它变成普通对象
// sendMsg( 'add-emp', { ...emp.value } );
  	// 我这里用的对象替代了数组
sendMsg("update-emp", { ...this.emp })

列表页面

javascript 复制代码
import { listenMsg } from "./utils/crossTagMsg"
var vm = null  //媒介
const unListen = listenMsg((info) => {
  if (info.type === "add-emp") {
    vm.emp.value.unshift(info.conten)
  } else if (info.type === "update-emp") {
  	// 我这里用的对象替代了数组
    vm.emp = info.content

	// -------------使用list对象-------------
	//const i = emps.value.findIndex((emp) => emp.id === info.content.id)
    //if (i >= 0) {
      // vue3的写法
      //emps.value[i] = info.content
      // vue2写法, 或者用$set
      // emps.value[i] = emps.value.splice(i, 1, info.content)
    //}
  }
})

data(){
   emp: { id: "sync-update", value1: "原值", value2: "内容" },
}

created() {
    let _this = this
    vm = _this  //this指向赋值
},
onUnmounted(unListen);
相关推荐
迷路的小绅士1 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
小希爸爸10 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师27 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭28 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码35 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger40 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话41 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时41 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳41 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹43 分钟前
React高阶组件——React.momo
javascript·react.js