跨越标签通信

跨越标签通信：（常见场景，列表页新增或者修改数据，新增或修改页面为新开页面）
需求：在新增或者修改时能出发列表页面查询最新数据
方案：监听本地存储

// 在新增或修改页面改变本地存储
export function sendMsg(type,payload){
  // 改变本地存储 @@是防止与其他存储的key冲突，temp：用于解决每次存储的值不一样，严谨一点可使用其他（如uuid）
  localStorage.setItem('@@'+type,JSON.stringify({payload,temp:Date.now()}))
}


// 列表页面监听本地存储
export function listen(handler){
  const storageHandler=e=>{
      const data=JSON.parse(e.newValue)

      // 去掉@@，回调传递key，与数据
      handler(e.key.substring(2),data.payload)
  }
  // 监听本地存储
  window.addEventListener('storage',storageHandler)
  // 可返回新的卸载监听函数
  return ()=>{
      window.removeEventListener('storage',storageHandler)
  }
}