vue项目动态监听localStorage或sessionStorage中数据的变化

2023-04-10 00:11| 来源: 网络整理| 查看: 265

1、首先在main.js中给Vue.prototype注册一个全局方法，然后创建一个StorageEvent方法，当我们执行sessionStorage.setItem(k,val)的时候，初始化事件并派发事件。

Vue.prototype.$addStorageEvent = function (type, key, data) { // localStorage if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { localStorage.setItem(k, val); // 初始化创建的事件 newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null); // 派发对象 window.dispatchEvent(newStorageEvent); } } return storage.setItem(key, data); } else { // sessionStorage // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { sessionStorage.setItem(k, val); // 初始化创建的事件 newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null); // 派发对象 window.dispatchEvent(newStorageEvent); } } return storage.setItem(key, data); } }

2、在需要存储的组件内用你注册的方法去存值

this.$addStorageEvent(1,'userMess',data);

3、在需要监听的组件内去监听做操作

window.addEventListener('setItem',() => { this.user = sessionStorage.getItem('userMess') })

文章来源：

1.vue项目动态监听localStorage或sessionStorage中数据的变化_小小小晓蓉的博客-CSDN博客

2.vue 项目监听localStorage或sessionStorage中值得变化

【本文地址】

公司简介

联系我们