浏览器标签页之间的通信

前言

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

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

上干货

最近看了渡一袁老师的视频,学到一个监听storage事件,能够监听别的标签页改动localStorage中的任何一个key 可以看到在别的标签页改变了storage中的一个key,即可触发监听,并且能知道改动了哪个key,以及最新的value值。这就相当于是一个标签页往另一个标签页发送消息。

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

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

发送消息的函数

思路:

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

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

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

监听消息的函数

思路:

  • 参数:接收一个回调函数
  • 函数体:监听storage事件,将监听到的数据回传给回调函数
  • 返回值:返回一个函数用来取消监听
js 复制代码
/**
 * @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)
  }
}

来测试一下

test.html index.html 看看效果

不得不说,真是太妙了!

相关推荐
y东施效颦12 分钟前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿15 分钟前
《开篇:课程目录》
前端·c#
摸鱼仙人~1 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客1 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
沉香亭北2 小时前
vue+vite 全局主题
前端
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
海底火旺2 小时前
探索扣子:解锁中间技能模块的无限可能
前端·人工智能·coze
Amctwd2 小时前
【HTML】HTML 与 CSS 基础教程
前端·css·html
快乐星球喂2 小时前
使用vant轮播组件swipe
前端
泡泡oO2 小时前
vue脱敏组件封装(适用于多种场景)——超详细手把手一步步教你使用
前端·javascript·vue.js