浏览器跨标签页通信 (上)

参考链接

1.使用LocalStorage 或 SessionStorage，使用 Web 存储机制（LocalStorage 或 SessionStorage）可以在不同标签页之间共享数据。一个标签页可以将数据存储在 LocalStorage 或 SessionStorage 中，其他标签页可以监听存储事件来获取更新的数据。
代码如下（示例）：

// 在一个标签页中写入数据到 LocalStorage 或 SessionStorage
localStorage.setItem('sharedData', 'Hello from Tab 1');
// 或者 sessionStorage.setItem('sharedData', 'Hello from Tab 1');

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

// 在另一个标签页中更新数据
localStorage.setItem('sharedData', 'Hello from Tab 2');
// 或者 sessionStorage.setItem('sharedData', 'Hello from Tab 2');

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

使用 Broadcast Channel API 实现跨标签页通信的一个简单案例代码：
代码如下（示例）：

A 页面
// 创建一个广播通道
const channel = new BroadcastChannel('myChannel');

// 发送消息
channel.postMessage('Hello from Tab 1');
B 页面
// 创建一个广播通道
const channel = new BroadcastChannel('myChannel');

// 监听消息事件
channel.onmessage = function(event) {
  const message = event.data;
  console.log('Received message:', message);
};

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

使用 SharedWorker 实现跨标签页通信的一个简单案例代码：
代码如下（示例）：

A 页面

// 监听来自 Shared Worker 的消息
worker.port.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};
 
// 向 Shared Worker 发送消息
worker.port.postMessage('Hello from main page!');

 worker.js 文件中

// 监听来自主页面的消息
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // 监听来自主页面的消息
  port.onmessage = function(event) {
    console.log('Received message from main page:', event.data);
    
    // 向主页面发送消息
    port.postMessage('Hello from shared worker!');
  };
};

4：Service Worker：Service Worker 是一种独立于网页的脚本，可以在后台运行，提供离线缓存和消息传递等功能。标签页可以通过 Service Worker 进行通信，发送消息和接收消息。
5：Window.postMessage()：Window.postMessage() 方法允许在不同的窗口或标签页之间安全地传递消息。通过调用 postMessage() 方法并指定目标窗口的 origin，可以将消息发送到其他标签页，并通过监听 message 事件来接收消息。

使用 window.postMessage() 实现跨标签页通信的一个简单案例代码：

// 监听消息事件
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://example.com') {
    return;
  }

  const message = event.data;
  console.log('Received message:', message);
});

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


在接收消息的标签页中

// 监听消息事件
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://example.com') {
    return;
  }

  const message = event.data;
  console.log('Received message:', message);

  // 回复消息
  event.source.postMessage('Hello from Other Tab', event.origin);
});

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

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

在接收消息的标签页中，同样通过 window.addEventListener(‘message’, …) 监听消息事件，并在事件处理函数中进行相应的操作。
6：使用 Cookies：可以将需要共享的数据存储在 Cookies 中，并在不同的标签页之间读取和更新这些 Cookies。当一个标签页更新数据时，将数据写入到 Cookies 中，其他标签页可以通过监听 Cookies 变化事件或定时读取 Cookies 来获取最新的数据。

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

下面是一个使用 Cookies 在标签页之间传递数据的简单案例代码：

在发送消息的标签页中：

// 设置 Cookie
document.cookie = 'sharedData=Hello from Tab 1';

在接收消息的标签页中：

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

let sharedData = null;
for (let i = 0; i < cookieArr.length; i++) {
  const cookie = cookieArr[i].trim();
  if (cookie.startsWith('sharedData=')) {
    sharedData = cookie.substring('sharedData='.length, cookie.length);
    break;
  }
}

console.log('Received message:', sharedData);

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

下面是一个使用IndexedDB进行通信的简单案例代码：

// 打开或创建IndexedDB数据库
const request = indexedDB.open('myDatabase', 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('数据库版本已更新');
};

8：使用服务器端存储：将需要共享的数据存储在服务器端，标签页之间通过与服务器进行通信来获取和更新数据。可以使用 AJAX、WebSocket 或其他网络通信技术来实现与服务器的数据交互。

注意：使用服务器端存储的方法可能需要进行网络请求，可能会涉及到延迟和带宽消耗。

而使用本地存储（如LocalStorage、SessionStorage）或客户端数据库（如IndexedDB）的方法更加直接和快速，适用于较小规模的数据共享和状态同步。

这些是常见的浏览器跨标签页通信的方式。具体选择哪种方式取决于你的需求和使用场景。