vue使用sessionStorage存储数据,页面不能实时更新
在vue中使用sessionStorage存储数据,当数据变化时页面不及时更新数据,需F5刷新页面才变化其他页面存储,另一父组件页面获取,子组件渲染,刚开始一直以为是父子组件传递数据这里有bug一、首先在main.js中声明全局变量这段代码是在网上找来的,这个key===的值为你存储sessionStorage声明的key// 只需修改xxxxx值,其余无需修改Vue.prototype.rese
·
在vue中使用sessionStorage存储数据,当数据变化时页面不实时更新数据,需F5刷新页面才变化
其他页面存储,另一父组件页面获取,子组件渲染,刚开始一直以为是父子组件传递数据这里有bug
一、首先在main.js中声明全局变量
这段代码是在网上找来的,这个key===的值为你存储sessionStorage声明的key
// 只需修改xxxxx值,其余无需修改
Vue.prototype.resetSetItem = function (key, newVal) {
if (key === 'xxxxx') {
// 创建一个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.setItem('key', value);
//后 ----加入你所需的key和value值
this.resetSetItem('key', value);
三、在获取sessionStorage的页面的created中加入以下代码
这里注意原来获取到的sessionStorage.getItem(‘key’)代码不要删除,这里是监听变化的代码,把之前的删除初始的数据就没有了
created(){
window.addEventListener('setItem', ()=> {
this.xxxx= JSON.parse(sessionStorage.getItem('key'));
})
}
更多推荐
已为社区贡献3条内容
所有评论(0)