浏览器标签页通信

在浏览器标签页中，不同标签页之间的通讯可以通过多种方式进行，以下是一些常用的方法：

本地存储事件（LocalStorage/SessionStorage）：

当在一个标签页中对localStorage或sessionStorage进行修改时，其他同源的标签页可以通过监听storage事件来接收通知。

示例代码：

// 在一个标签页中设置LocalStorage
localStorage.setItem('key', 'value')
// 在另一个标签页中监听storage事件
window.addEventListener('storage', function (event) {
  console.log('Key:', event.key, 'Value:', event.newValue)
})

Cookie：
- 通过修改document.cookie可以在不同标签页之间传递信息，但是这种方法不太适合大量数据或频繁的通讯。
- 示例代码：
```
// 在一个标签页中设置Cookie
document.cookie = 'key=value; path=/'
// 在另一个标签页中读取Cookie
console.log(document.cookie)
```

Broadcast Channel API：

BroadcastChannel允许同源的不同窗口、iframe或标签页之间进行通讯。

示例代码：

// 创建BroadcastChannel实例
const bc = new BroadcastChannel('my_channel')
// 发送消息
bc.postMessage('Hello from tab1')
// 在另一个标签页中监听消息
const bc = new BroadcastChannel('my_channel')
bc.onmessage = function (event) {
  console.log('Received:', event.data)
}

SharedWorker：

SharedWorker是Web Workers的一种，可以在多个标签页之间共享。

示例代码：

// 创建SharedWorker
const sharedWorker = new SharedWorker('shared-worker.js')
// 向SharedWorker发送消息
sharedWorker.port.postMessage('Hello from tab1')
// 在SharedWorker中监听消息
self.onconnect = function (event) {
  const port = event.ports[0]
  port.onmessage = function (event) {
    // 处理消息并转发给其他端口
    port.postMessage('Message received: ' + event.data)
  }
}

Service Workers：

Service Workers可以用来在后台处理网络请求和消息传递。

示例代码：

// 注册Service Worker
navigator.serviceWorker.register('/service-worker.js').then(() => {
  // 向Service Worker发送消息
  navigator.serviceWorker.controller.postMessage('Hello from tab1')
})
// 在Service Worker中监听消息
self.addEventListener('message', function (event) {
  // 处理消息并可能向其他标签页发送消息
  clients.matchAll().then(clients => {
    clients.forEach(client => client.postMessage('Message from SW'))
  })
})

IndexedDB：- IndexedDB是一个在浏览器中存储结构化数据的数据库，可以在不同标签页之间共享数据。- 示例代码： javascript // 在一个标签页中写入IndexedDB let openRequest = indexedDB.open('myDatabase', 1); openRequest.onupgradeneeded = function() { let db = openRequest.result; let store = db.createObjectStore('myStore', {keyPath: 'id'}); store.put({id: 1, value: 'Hello from tab1'}); }; // 在另一个标签页中读取IndexedDB let openRequest = indexedDB.open('myDatabase', 1); openRequest.onsuccess = function() { let db = openRequest.result; let transaction = db.transaction('myStore', 'readonly'); let store = transaction.objectStore('myStore'); let getRequest = store.get(1); getRequest.onsuccess = function() { console.log('Received:', getRequest.result.value); }; }; 这些方法各有特点，可以根据具体的应用场景和需求选择合适的通讯方式。例如，对于简单的数据传递，可以使用LocalStorage；对于需要实时通讯的场景，可以使用Broadcast Channel或SharedWorker。

浏览器标签页通信

前端学习笔记