浏览器多标签页通讯

1.localStorage实现通信

//A页面
   window.addEventListener("storage", (e) => {
    console.info("localStorage发生变化：", e)
  })
//B页面 需要触发localstorage的函数设置setitem
 btnB.addEventListener("click", () => {
    localStorage.setItem("num", num++)
  })

2.websocket

// 创建一个websocket连接
  var ws = new WebSocket('ws://localhost:3000/');
  // WebSocket连接成功回调
  ws.onopen = function () {
    console.log("websocket连接成功")
  }
  // 这里接受服务器端发过来的消息
  ws.onmessage = function (e) {
    console.log("服务端发送的消息", e.data)
  }

 btnB.addEventListener("click", () => {
    ws.send(`客户端B发送的消息:${num++}`);
  })
  // 创建一个websocket连接
  var ws = new WebSocket('ws://localhost:3000/');
  // WebSocket连接成功回调
  ws.onopen = function () {
    console.log("websocket连接成功")
  }

3.SharedWorker

/ worker.js
const set = new Set()
onconnect = event => {
  const port = event.ports[0]
  set.add(port)
  // 接收信息
  port.onmessage = e => {
    // 广播信息
    set.forEach(p => {
      p.postMessage(e.data)
    })
  }
  // 发送信息
  port.postMessage("worker广播信息")
}

 const worker = new SharedWorker('./worker.js')
  worker.port.onmessage = e => {
    console.info("pageA收到消息", e.data)
  }

const worker = new SharedWorker('./worker.js')
  let btnB = document.getElementById("btnB");
  let num = 0;
  btnB.addEventListener("click", () => {
    worker.port.postMessage(`客户端B发送的消息:${num++}`)
  }

4.cookie + setInterval

//A页面
setInterval(() => {
    //加入定时器，让函数每一秒就调用一次，实现页面刷新
    console.log("cookie",document.cookie)
  }, 1000);
 //B页面
  btnB.addEventListener("click", () => {
    document.cookie = `客户端B发送的消息:${num++}`
  })