vue-两个浏览器tab页通信的思路

前言

最近在开发中遇到一个场景，有一个列表页和详情页，由于业务需求，需要用新标签页来打开详情页，因此我用了window.open()打开详情页，详情页中有一个保存功能，保存后需要触发一个事件，让列表页监听执行刷新列表的操作，最先想到的是eventBus，详情页保存成功时emit一个事件让列表页去监听，但发现列表页始终监听不到，后面又用vuex状态管理，详情页保存后更改store里的值，列表页监听这个值做对应的操作，也是失败了。后面才反应过来，由于vue是单页应用，两个标签页的状态是响应不到一块的

解决思路

使用localStorage，相同浏览器的同源页面共享（页面属于相同域名和端口）

1. 在列表页中，点击进入详情页时，存储一个数据，值为false

localStorage.setItem('isSave', false)

2. 在详情页中，保存成功后，设置为true

localStorage.setItem('isSave', false)

3. 在列表页中，通过window.onstorage监听storage数据的改变，返回一个event事件对象

function onStorageHandle(e) {
  if (e.key === 'isSave' && e.newValue === 'true') {
    search()  // 刷新列表页
  }
}
window.addEventListener('storage', onStorageHandle);