vue 跨标签页的数据共享(即跨标签页通信)

跨标签页通信的常见方案

LocalStorage 或 SessionStorage

BroadCast Channel

Service Worker

Shared Worker

Window.postMessage()

Cookies

IndexedDB

什么是跨标签页通信？

指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。

跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。

例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。

跨标签页通信主要用于哪些需求？

① 数据共享：当多个标签页需要访问和共享相同的数据时，跨标签页通信可以用于在这些标签页之间传递数据，确保它们保持同步。

② 状态同步：在一些应用中，可能会有多个标签页用于展示相同的应用状态或会话状态。通过跨标签页通信，可以实现状态的同步，使得在一个标签页中的操作能够即时反映到其他标签页上。

③ 消息通知：跨标签页通信可以用于实现在一个标签页中发送消息，然后其他标签页接收并展示这些消息的功能。

④ 共享资源：在某些场景下，可能需要在多个标签页之间共享某些资源，如网络连接、音频/视频播放器等等。

⑤ 多窗口管理：对于一些具有多个窗口的应用，跨标签页通信可以用于实现窗口之间的联动和数据同步。

常见方案的实现

方案一：LocalStorage 或 SessionStorage

使用 Web 存储机制( LocalStorage 或 SessionStorage )可以在不同标签页之间共享数据。一个标签页可以将数据存储在 LocalStorage 或 SessionStorage 中，其他标签页可以监听存储事件来获取更新的数据。

/* 在一个标签页中写入数据到 LocalStorage 或 SessionStorage */
localStorage.setItem('shareData', '标签页111');
// sessionStorage.setItem('shareData', '标签页111');

/* 在其他标签页中监听存储事件，并获取更新的数据 */
window.addEventListener('storage', function(event) {
  if (event.key === 'shareData') {
    const newData = event.newValue;
    console.log('收到的更新数据：', newData);
  }
});

/* 在另一个标签页中更新数据到 LocalStorage 或 SessionStorage */
localStorage.setItem('shareData', '标签页222');
// sessionStorage.setItem('shareData', '标签页222');

首先在一个标签页中通过 localStorage.setItem() 或 sessionStorage.setItem() 方法将数据写入到 LocalStorage 或  SessionStorage 中。

然后在其他标签页中通过监听 storage 事件来捕获存储事件，并判断事件的 key 是否为我们共享的数据 sharedData，如果是，则获取更新的数据 newValue 并进行处理。

最后在另一个标签页中通过 localStorage.setItem() 或 sessionStorage.setItem() 方法更新数据。

方案二：Broadcast Channel

Broadcast Channel API 允许不同标签页之间通过共享的通道进行消息广播和接收。一个标签页可以通过通道发送消息，其他订阅了相同通道的标签页可以接收到这些消息。

在发送消息的标签页中

/* 创建一个广播通道 */
const channelObj = new BroadcastChannel('televiseChannel');

// 发送消息
channelObj.postMessage('标签页111');

在接收消息的标签页中

/* 创建一个广播通道 */
const channelObj = new BroadcastChannel('televiseChannel');

// 监听消息事件
channelObj.onmessage = function(event) {
  const newData = event.data;
  console.log('收到的更新数据：', newData);
};

在发送消息的标签页中创建一个 Broadcast Channel，并指定一个唯一的通道名称(这里使用'televiseChannel')。通过 channelObj.postMessage() 方法发送消息到该通道。

在接收消息的标签页中，同样创建一个具有相同通道名称的 Broadcast Channel。然后通过为 channelObj.onmessage 赋值一个函数来监听消息事件。当接收到消息时，事件对象 event 中的 data 属性将包含发送的消息内容，我们可以在监听函数中获取并处理该消息。

方案三：Service Worker

Service Worker 是一种独立于网页的脚本，可以在后台运行，提供离线缓存和消息传递等功能。标签页可以通过 Service Worker 进行通信，发送消息和接收消息。

方案四：Shared Worker

Shared Worker 是一种在多个标签页之间共享的后台线程。标签页可以通过 SharedWorker 进行通信，发送消息和接收消息。这种方式需要使用 JavaScript 的 Worker API。

在发送消息的标签页中

/* 创建一个 SharedWorker */
const worker = new SharedWorker('worker.js');

// 发送消息
worker.port.postMessage('标签页111');

在共享的 Worker 脚本文件 worker.js 中

/* 监听连接事件 */
self.onconnect = function(event) {
  const port = event.ports[0];
  // 监听消息事件
  port.onmessage = function(event) {
    const newData = event.data;
    console.log('收到的更新数据：', newData);
  };
  // 发送消息
  port.postMessage('你好啊！Worker');
};

在发送消息的标签页中创建一个 SharedWorker，并指定共享的 Worker 脚本文件路径为 'worker.js'。然后通过 worker.port.postMessage() 方法发送消息到 SharedWorker。

在共享的 Worker 脚本文件 worker.js 中，通过监听 self.onconnect 事件来捕获连接事件，并获取与标签页之间的通信端口 port。然后通过为 port.onmessage 赋值一个函数来监听消息事件。当接收到消息时，事件对象 event 中的 data 属性将包含发送的消息内容，我们可以在监听函数中获取并处理该消息。

方案五：Window.postMessage()

Window.postMessage() 方法允许在不同的窗口或标签页之间安全地传递消息。通过调用 postMessage() 方法并指定目标窗口的 origin，可以将消息发送到其他标签页，并通过监听 message 事件来接收消息。

在发送消息的标签页中

/* 监听消息事件 */
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://example.com') return;
  const newData = event.data;
  console.log('收到的更新数据：', newData);
});

// 发送消息到其他标签页
const targetWindow = window.open('http://example.com/otherpage', '_blank');
targetWindow.postMessage('标签页111', 'http://example.com');

在接收消息的标签页中

/* 监听消息事件 */
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://example.com') return;
  const newData = event.data;
  console.log('收到的更新数据：', newData);
  // 回复消息
  event.source.postMessage('标签页222', event.origin);
});

在发送消息的标签页中通过使用 window.addEventListener('message', ...) 监听消息事件。在事件处理函数中，可以用 event.origin 来验证消息的来源是否符合预期。然后，可以用 event.data 获取到发送的消息内容，并进行相应的操作。

在发送消息的标签页中，用 window.open() 打开了一个新的标签页(http://example.com/otherpage)，然后通用 targetWindow.postMessage() 向该标签页发送消息。在这里，我们指定了消息的目标窗口和预期的来源(即目标标签页的 URL)。

在接收消息的标签页中，同样通过 window.addEventListener('message', ...) 监听消息事件，并在事件处理函数中进行相应的操作。

方案六：Cookies

可以将需要共享的数据存储在 Cookies 中，并在不同的标签页之间读取和更新这些 Cookies。当一个标签页更新数据时，将数据写入到 Cookies 中，其他标签页可以通过监听 Cookies 变化事件或定时读取 Cookies 来获取最新的数据。

使用 Cookies 进行通信是一种简单的方法，但它主要用于在客户端和服务器之间传递数据，而不是直接实现跨标签页通信。Cookies 会自动在客户端和服务器之间进行传递，因此可以在不同的标签页之间共享数据。

在发送消息的标签页中

/* 设置 Cookie 值 */
document.cookie = 'shareData=标签页111';

在接收消息的标签页中

/* 获取 Cookie 值 */
const cookies = document.cookie;
const cookieArr = cookies.split(';');
const strField = 'shareData=';

let newData = null;
for (let i = 0; i < cookieArr.length; i++) {
  const cookie = cookieArr[i].trim();
  if (cookie.startsWith(strField)) {
    newData = cookie.substring(strField.length, cookie.length);
    break;
  }
}
console.log('收到的更新数据：', newData);

方案七：IndexedDB

IndexedDB 是浏览器提供的一个客户端数据库，可以在不同的标签页之间存储和读取数据。一个标签页可以将数据写入 IndexedDB，其他标签页可以监听 IndexedDB 的变化事件或定时从 IndexedDB 中读取数据来实现数据的共享和状态的同步。

/* 打开或创建 IndexedDB 数据库 */
const request = indexedDB.open('dataBase', 1);

/* 成功打开数据库 */
request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建一个对象存储空间(类似表)
  const objectStore = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });

  // 添加一条消息到对象存储空间
  const message = { text: 'Hello, World!' };
  const addRequest = objectStore.add(message);

  addRequest.onsuccess = function(event) {
    console.log('消息已添加到IndexedDB');
  };

  addRequest.onerror = function(event) {
    console.error('添加消息到IndexedDB时发生错误');
  };

  // 从对象存储空间获取所有消息
  const getAllRequest = objectStore.getAll();

  getAllRequest.onsuccess = function(event) {
    const messages = event.target.result;
    console.log('所有消息:', messages);
  };

  getAllRequest.onerror = function(event) {
    console.error('获取消息时发生错误');
  };
};

/* 打开或创建数据库时发生错误 */
request.onerror = function(event) {
  console.error('打开/创建数据库时发生错误');
};

/* 数据库版本变更 */
request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建一个对象存储空间
  const objectStore = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });

  console.log('数据库版本已更新');
};