js如何进行跨标签页数据更新？

主要有以下几种：

1、BroadCast Channel

// 创建 Broadcast Channel 对象
const channel = new BroadcastChannel('my_channel');

// 发送消息
channel.postMessage({message: 'Hello, world!'});
//在页面2中：
// 创建 Broadcast Channel 对象
const channel = new BroadcastChannel('my_channel');

// 接收消息
channel.addEventListener('message', function(event) {
  console.log('收到消息：', event.data);
});

2、Service Worker

// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功：', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker 注册失败：', error);
  });
}

// 在 Service Worker 中添加消息监听
self.addEventListener('message', function(event) {
  console.log('Service Worker 接收到消息：', event.data);

  // 向其他标签页发送消息
  clients.matchAll({type: 'window'}).then(function(clients) {
    clients.forEach(function(client) {
      client.postMessage(event.data);
    });
  });
});

// 在标签页中添加消息监听
navigator.serviceWorker.addEventListener('message', function(event) {
  console.log('标签页接收到消息：', event.data);
});

// 在标签页中发送消息给 Service Worker
navigator.serviceWorker.controller.postMessage('Hello, Service Worker!');

3、LocalStorage window.onstorage 监听

// 存储数据到LocalStorage
localStorage.setItem('my_key', 'my_value');

// 监听LocalStorage变化
window.addEventListener('storage', function(event) {
  console.log('LocalStorage变化：', event.key, event.newValue);
});
//在页面B中：
// 更新LocalStorage中的数据
localStorage.setItem('my_key', 'new_value');

4、Shared Worker 定时器轮询(setInterval

在 Shared Worker 中worker.js:

let timerId = null;

function startPolling() {
timerId = setInterval(function() {
console.log('轮询任务');
}, 1000);
}

function stopPolling() {
clearInterval(timerId);
}

self.addEventListener('connect', function(event) {
const port = event.ports[0];

// 监听消息
port.addEventListener('message', function(event) {
if (event.data === 'start') {
startPolling();
} else if (event.data === 'stop') {
stopPolling();
}
});...

点击查看剩余70%