vue项目监听sessionStorage的变化
vue项目监听sessionStorage的变化
·
一、main.js中
/*实时获取 sessionStorage 的值*/
Vue.prototype.resetSetItem = function (key, newVal) {
//注意categoryNum为要监听的属性,实际开发中请自行修改
if (key === 'categoryNum') {
// 创建一个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, newVal);
}
}
二、在保存sessionStorage 的文件中
this.resetSetItem('categoryNum', val);
// val 为需要保存并监听的数据
三、获取数据的页面
const num = ''
// 监听sessiongStorage的值 动态获取数值
window.addEventListener('setItem', ()=> {
num = JSON.parse(sessionStorage.getItem('categoryNum'))
只需三步,就可以拿到其他页面实时变动的值了,其中,这是vue2的写法,vue3写法可以自行匹配一下
更多推荐
已为社区贡献3条内容
所有评论(0)