vue监听sessionStorage中值的变化方式
作者：朝阳39
这篇文章主要介绍了vue监听sessionStorage中值的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
通过 watch 可以监听vue实例已有属性的变化，那么怎样监听 sessionStorage 中值的变化呢？
使用场景
以角色为例，将当前用户的角色存入 sessionStorage 的 role 中，切换角色后，首先要修改 sessionStorage 中的 role 值，接着需从 sessionStorage 中取出新的 role 值显示在页面上。
重难点：
当 sessionStorage 中的 role 值改变时，需同步更新所有页面的 role 值。
解决方案
使用公共组件封装各个页面对 role 值的显示，并在其中监听 sessionStorage 的变化，实时更新页面的 role 值
核心代码
将 sessionStorage 的变化注册为全局事件 setItem
（ 若想全局使用，则下方代码写在main.js中 ）
import Vue from "vue";
Vue.prototype.setSessionItem = function (key, newVal) {
// 创建 StorageEvent 事件
let newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化 StorageEvent 事件
newStorageEvent.initStorageEvent(
"setItem", // 事件别名
false,
false,
k,
null,
val,
null,
null
);
// 派发事件
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, newVal);
};在页面创建时添加对 setItem 事件的监听
mounted() {
// 添加对 sessionStorage 的监听
window.addEventListener("setItem", () => {
this.role = sessionStorage.getItem("role");
});
},在页面销毁时移除对 setItem 事件的监听
beforeDestroy() {
// 移除对 sessionStorage 的监听
window.removeEventListener("setItem", () => {});
},完整范例
首次进入页面的效果
点击按钮修改角色后
完整代码如下：
<template>
<div style="padding: 20px">
<p>sessionStorage中“role” 的值为 —— {{ role }}</p>
<el-button type="primary" @click="change"
>将sessionStorage中“role” 的值改为“管理员”</el-button
>
</div>
</template>
<script>
import Vue from "vue";
Vue.prototype.setSessionItem = function (key, newVal) {
// 创建 StorageEvent 事件
let newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化 StorageEvent 事件
newStorageEvent.initStorageEvent(
"setItem", // 事件别名
false,
false,
k,
null,
val,
null,
null
);
// 派发事件
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, newVal);
};
export default {
data() {
return {
role: sessionStorage.getItem("role") || "未定义角色",
};
},
mounted() {
// 添加对 sessionStorage 的监听
window.addEventListener("setItem", () => {
this.role = sessionStorage.getItem("role");
});
},
beforeDestroy() {
// 移除对 sessionStorage 的监听
window.removeEventListener("setItem", () => {});
},
methods: {
change() {
// 修改 sessionStorage 中的值
this.setSessionItem("role", "管理员");
},
},
};
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。