浏览器标签页之间的通信

前言

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

如果用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 看看效果

不得不说,真是太妙了!

相关推荐
哆啦A梦15881 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15883 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫3 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo3 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li4 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊5 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz6 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom6 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1237 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js