回答

主要有以下几种：

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();
}
});

// 向标签页发送消息
port.postMessage('Shared Worker 已连接');
});

在标签页中：

const worker = new SharedWorker('worker.js');
const port = worker.port;

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

// 启动轮询任务
port.postMessage('start');

// 停止轮询任务
port.postMessage('stop');

在上面的代码中，我们在 Shared Worker 中定义了一个 startPolling() 方法，用于启动定时器轮询任务，并将任务输出到控制台上。stopPolling() 方法用于停止轮询任务。在标签页中，我们创建了一个 Shared Worker，并通过 worker.port 来获取共享端口，然后向 Shared Worker 发送消息来启动和停止轮询任务，并通过监听 message 事件来接收来自 Shared Worker 的消息。

5、IndexedDB 定时器轮询 (setInterval )

const DB_NAME = 'my_db';
const STORE_NAME = 'my_store';
const TASK_KEY = 'task';
const INTERVAL_TIME = 1000;

let db = null;

// 打开数据库
const request = window.indexedDB.open(DB_NAME);
request.onerror = function(event) {
console.log('打开数据库失败：', event.target.errorCode);
};
request.onsuccess = function(event) {
db = event.target.result;
console.log('打开数据库成功');

// 启动轮询任务
startPolling();
};

// 启动轮询任务
function startPolling() {
setInterval(function() {
const transaction = db.transaction(STORE_NAME, 'readwrite');
const store = transaction.objectStore(STORE_NAME);

// 读取任务
const request = store.get(TASK_KEY);
request.onerror = function(event) {
console.log('读取任务失败：', event.target.errorCode);
};
request.onsuccess = function(event) {
const task = event.target.result;

if (task) {
console.log('执行任务：', task);
// 执行任务
// ...

// 删除任务
const deleteRequest = store.delete(TASK_KEY);
deleteRequest.onerror = function(event) {
console.log('删除任务失败：', event.target.errorCode);
};
deleteRequest.onsuccess = function(event) {
console.log('删除任务成功');
};
} else {
console.log('没有任务需要执行');
}
};
}, INTERVAL_TIME);
}

在上面的代码中，我们首先使用 indexedDB.open() 方法打开一个名为 my_db 的数据库，并在成功打开数据库后启动轮询任务。在轮询任务中，我们使用 IndexedDB 的事务和对象存储来读取任务，如果存在待执行的任务，则执行任务并将其从数据库中删除。如果没有任务需要执行，则输出相应的信息到控制台上。

6、COOKIE 定时器轮询 ( setInterval )

在JavaScript中，可以使用document.COOKIE属性来读取和设置COOKIE。如果需要定时轮询某个任务，可以使用setInterval()方法来实现。

下面是一个使用COOKIE定时器轮询的示例代码：

const COOKIE_NAME = 'my_COOKIE';
const INTERVAL_TIME = 1000;

// 启动轮询任务
function startPolling() {
  setInterval(function() {
    const COOKIEValue = getCOOKIE(COOKIE_NAME);
    if (COOKIEValue) {
      console.log('执行任务：', COOKIEValue);
      // 执行任务
      // ...

      // 删除COOKIE
      setCOOKIE(COOKIE_NAME, '', -1);
      console.log('删除COOKIE');
    } else {
      console.log('没有任务需要执行');
    }
  }, INTERVAL_TIME);
}

// 读取COOKIE
function getCOOKIE(name) {
  const COOKIEs = document.COOKIE.split(';');
  for (let i = 0; i < COOKIEs.length; i++) {
    const COOKIE = COOKIEs[i].trim();
    if (COOKIE.startsWith(name + '=')) {
      return COOKIE.substring(name.length + 1);
    }
  }
  return null;
}

// 设置COOKIE
function setCOOKIE(name, value, days) {
  let expires = '';
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = '; expires=' + date.toUTCString();
  }
  document.COOKIE = name + '=' + value + expires + '; path=/';
}

// 启动轮询任务
startPolling();

7、window.open、window.postMessage

// 打开一个新窗口
const newWindow = window.open('http://www.example.com', '_blank');
在上面的代码中，我们使用window.open方法打开了一个新窗口，并指定了要打开的页面的URL和窗口的名称。如果指定的名称已经存在，则会在该窗口中加载新的页面。

//使用window.postMessage方法：

//在发送消息的窗口中：


// 向其他窗口发送消息
const otherWindow = document.getElementById('other-window').contentWindow;
otherWindow.postMessage('Hello, world!', 'http://www.example.com');
//在接收消息的窗口中：

// 接收其他窗口发送的消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://www.example.com') {
console.log('收到消息：', event.data);
}
});

8、Websocket

const socket = new WebSocket('ws://localhost:8080');

// 连接建立时触发
socket.addEventListener('open', function(event) {
  console.log('WebSocket 连接已建立');

  // 发送消息
  socket.send('Hello, server!');
});

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

// 连接关闭时触发
socket.addEventListener('close', function(event) {
  console.log('WebSocket 连接已关闭');
});