浏览器跨标签页数据传递及监听

 常用场景：

用浏览器不通标签页使用同个web程序时候，需要同步更新。（页面A添加/修改数据，页面B同步更新数据内容）

原理：通过localstorage临时进行本地存储，并监听localstorage该字段的变化。

• 传递：使用localStorage 本地存储数据
• 监听：事件“storage”，默认情况下，当前页面修改localStorage，本页面是无法监听的，只有同源的其他页面才可以监听到本页面localStorage的改变。（调试器修改或删除localStroage也能监听到）

封装成可复用的公共函数

export function send (key, data) //key是监听的字段名，data是发送的信息
{
  //用对象包裹并且，添加一个时间戳可以让同样的信息也触发监听
  let obj = {
    data: data,
    date: Date.now()
  }
  let keyType = "@_#" + key //用奇奇怪怪的符号为前缀，防止覆盖到其他本地存储
  localStorage.setItem(keyType, JSON.stringify(obj))
}

export function listen (key, callbackFun) { //接收字段和一个带参数的回调函数()
  let keyType = "@_#" + key
  window.addEventListener("storage", (e) => {
    if (e.newValue) {
      if (e.key == keyType) {
        let res = JSON.parse(localStorage.getItem(keyType))
        callbackFun(res) 
      }
    } else {
      return("error")
    }
  }, false) //取消冒泡，防止对象中多属性改变而多次触发

}

使用示例：

（复制示例需安装elelemt-ui）

<template>
  <div  >
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="data"
      label="数据内容"
      width="180">
    </el-table-column>
  </el-table>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button @click="add">添加</el-button>
  </div>
</template>

<script>
  import {send,listen} from "@/utils/tools.js"
  export default {
    name: 'HelloWorld',
    data () {
      return {
        input:"",
        tableData: [{
          data:"初始内容1",
        },
        {
          data:"初始内容2",
        }
      ]
      }
    },
    created(){
      // 页面创建后就可以开启监听了
      listen("KKK",this.fun2) 
    },
    methods:{
      add(){
        send("KKK",this.input)
      },
      fun2(res){
        // 定义的回调函数需要一个参数去接收返回的新内容
        this.tableData.push({data:res.data})
      }
    }
  }
</script>