vue监听sessionStorage中值的变化方式
更新时间：2024年07月27日 08:41:23 作者：朝阳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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近公司项目有个导出ppt的功能,在使用ppexgen.js一周完成功能之后,这篇文章主要给大家介绍了关于前端vue如何使用pptxgen.js导出PPT的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue使用JSEncrypt实现rsa加密及挂载方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要给大家介绍了关于Vue数据双向绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
这篇文章主要介绍了vue axios 给生产环境和发布环境配置不同的接口地址，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章介绍了vue.js实现开关(switch)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue实现表单验证功能，基于NUXT的validate方法实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue实现form表单与table表格的数据关联功能,涉及vue.js表单事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论