前端跨浏览器标签页通信低成本解决方案

前言

这篇文章来源于一个bug。
具体问题是这样的，一个模块的列表可查看另一个模块的详情，由于项目复杂度很高，所以类似这种跨模块跳转做的都是打开新页面，以避免由于路由嵌套层次过多导致的页面流转问题。
所以问题来了，新页面中可以对这条数据进行操作，操作成功后，测试人员想在原页面列表中实时看到更新后的数据，而不必为此刷新页面。

二、解决方案

接下来进行了一系列试错，直接上正确答案：
通过浏览器同源策略，同源共享localstorage解决这个问题

在列表点击事件中，存入一个标识

localStorage.setItem('isUpdate', false)

详情页中进行更新操作，接口调用成功后将标识改为true

localStorage.setItem('isUpdate', true)

列表中监听storage的变化，isUpdate为true时，刷新列表

mounted时监听：

mounted() {
  window.addEventListener('storage', this.handleStorageChange)
},

处理函数：

handleStorageChange(e) {
  if (e.key === 'isUpdate' && e.newValue === 'true') {
    this.getColumns() // 列表查询
  }
},

组件销毁前移除storage监听

beforeDestroy() {
  window.removeEventListener('storage', this.handleStorageChange)
  localStorage.removeItem('isUpdate')
},

至此，完美解决~
其他更多的解决方式，请指教，待更新~