vue动态监听localStorage或sessionStorage中数据的变化
1、首先在main.js中设置以下代码。2、在存数据的页面设置此代码。3、在取数据的页面用此代码。
·
1、首先在main.js中设置以下代码
/**
* @description 监听本地储存的值变化
* @param { number } type 1 localStorage 2 sessionStorage
* @param { string } key 键
* @param { string } data 要存储的数据
* @returns
*/
Vue.prototype.$addStorageEvent = function (type, key, data) {
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 {
// 创建一个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, 'deptId', JSON.stringify(This.formData.deptId));//存储数据,addStorageEvent自定义方法
//this.$addStorageEvent(2, 'deptId', JSON.stringify(This.formData.deptId));//存储数据,addStorageEvent自定义方法
3、在取数据的页面用此代码
mounted() {
const that = this
// 在mouted钩子函数中进行监听localStorage
window.addEventListener('setItem', () => {
that.formData.deptId = JSON.parse(localStorage.getItem('deptId'))
//that.formData.deptId是data里面声明的变量
//that.formData.deptId = JSON.parse(sessionStorage.getItem('deptId'))
})
},

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)