跨标签页的数据共享

在JavaScript中，BroadcastChannel是一个用于在同一个源（origin）下的不同浏览器窗口、标签页或iframe之间发送和接收消息的API。它允许你创建一个BroadcastChannel对象，并通过这个对象发送和接收消息

// sync-msg：广播频道名称可自定义
const channel = new BroadcastChannel('sync-msg'); // 创建一个广播频道

/**
 * @param {"add", "remove", "updated"} type
 * @param {any} msg
 * @return {*}
 */
export function sendMsg (type, msg) {
  channel.postMessage({ type, msg }); // 向频道发送消息
}

/**
 * @param {any} callback
 * @return {*}
 */
export function listenMsg (callback) {
  const handler = (e) => {
    callback && callback(e.data); // 处理接收到的消息
  }
  channel.addEventListener('message', handler); // 监听频道消息
  return () => {
    channel.removeEventListener('message', handler); // 取消监听
  }
}

例如有一个表格，有增加和编辑
主页面有个表格

import { listenMsg } from '../utils/crossTagMsg';

const unlisten = listenMsg((res) => {
      if (res.type === 'add') {
        this.dataArr.unshift(res.msg)
      } else {
        const index = this.dataArr.findIndex(item => item.id === res.msg.id);
        this.dataArr.splice(index, 1, res.msg)
      }
 })
onUnmounted(unlisten)

增加

import { sendMsg} from '../utils/crossTagMsg';

handleAdd() {
      sendMsg('add', { id: 3, name: '小明' })
 }

编辑

import { sendMsg} from '../utils/crossTagMsg';

handleAdd() {
      sendMsg('updated', { id: 1, name: '李四' })
 }