常用场景:
用浏览器不通标签页使用同个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>