vue动态监听localStorage或sessionStorage中数据的变化
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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'))
})
},
GitHub 加速计划 / vu / vue
207.56 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)