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

1. 本地存储事件（LocalStorage/SessionStorage）：
   • 当在一个标签页中对localStorage或sessionStorage进行修改时，其他同源的标签页可以通过监听storage事件来接收通知。
   • 示例代码：

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

2. Cookie：
   • 通过修改document.cookie可以在不同标签页之间传递信息，但是这种方法不太适合大量数据或频繁的通讯。
   • 示例代码：

     1
     // 在一个标签页中设置Cookie
     2
     document.cookie = 'key=value; path=/'
     3
     // 在另一个标签页中读取Cookie
     4
     console.log(document.cookie)
     

3. Broadcast Channel API：
   • BroadcastChannel允许同源的不同窗口、iframe或标签页之间进行通讯。
   • 示例代码：

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

4. SharedWorker：
   • SharedWorker是Web Workers的一种，可以在多个标签页之间共享。
   • 示例代码：

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

5. Service Workers：
   • Service Workers可以用来在后台处理网络请求和消息传递。
   • 示例代码：

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

6. 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。