浏览器标签页之间的通信

news2024/12/23 22:44:17

前言

在开发管理后台页面的时候，会遇到这样一种需求：有一个列表页面，一个新增按钮，一个新增页面，点击新增按钮，在一个新的标签页中打开新增页面。并且，新增后要自动实时的更新列表页面的数据。

如果用Vue/React等现代SPA（单页面）框架，我们很容易想到使用状态管理库来实现，但如果是两个不同的html页面呢，例如一个是list.html，一个是detail.html，你可能会想到使用websocket或EventSource，但这实在是有点大材小用了。

上干货

最近看了渡一袁老师的视频，学到一个监听storage事件，能够监听别的标签页改动了localStorage中的任何一个key。

可以看到在别的标签页改变了storage中的一个key，即可触发监听，并且能知道改动了哪个key，以及最新的value值。这就相当于是一个标签页往另一个标签页发送消息。

有了这个，这样我们就可以实现标签页之间的通信了。

可以写一个通用的js，这个js只需要实现两个函数。一个用来发送消息，一个用来监听消息。

发送消息的函数

思路：

参数1：接收一个type类型，用来表示做了什么操作
参数2：接收一个操作的数据payload
函数体：用type作为key，payload作为value，保存到localStorage
返回值：无

前面说了，只有某个key的value值改变了才会触发，那么多次新增一样的数据，就不会触发，所以需要给保存的数据附加一个随机数。

/**
 * @description: 发送消息
 * @param {*} type 操作类型
 * @param {*} payload 操作的数据
 * @return {*} null
 */
export function sendMsg(type, payload) {
  localStorage.setItem(
    type, 
    JSON.stringify({
      payload,
      temp: +new Date()
    })
  )
}

监听消息的函数

思路：

参数：接收一个回调函数
函数体：监听storage事件，将监听到的数据回传给回调函数
返回值：返回一个函数用来取消监听

/**
 * @description: 监听消息
 * @param {*} handle 回调函数
 * @return {*} 取消监听的函数
 */
export function listenMsg(handle) {
  const storageHandler = (e) => {
    const data = JSON.parse(e.newValue)
    handle(e.key, data.payload)
  }
  window.addEventListener('storage', storageHandler)
  return () => {
    window.removeEventListener('storage', storageHandler)
  }
}