vue项目如何监听localStorage或sessionStorage的变化
出现这个问题的起因：在一个VUE页面中，引入两个组件，A组件实现基础信息展示，B组件展示列表，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态来做业务处理，首先想到的是把状态放在localStorage，接下去就是在B组件怎么监听A组件状态
解决方法：
1.首先在main.js中给Vue.protorype注册一个全局方法，然后创建一个StorageEvent方法，当我在执行sessionStorage.setItem(k,val)的时候，初始化事件并派发事件。
/**
*@description
*@author(Setthetextforthistagbyaddingdocthis.authorNametoyoursettingsfile.)
*@date2019-05-29
*@param{number}type1localStorage2sessionStorage
*@param{string}key键
*@param{string}data要存储的数据
*@returns
*/
Vue.prototype.$addStorageEvent=function(type,key,data){
if(type===1){
//创建一个StorageEvent事件
varnewStorageEvent=document.createEvent('StorageEvent');
conststorage={
setItem:function(k,val){
localStorage.setItem(k,val);
//初始化创建的事件
newStorageEvent.initStorageEvent('setItem',false,false,k,null,val,null,null);
//派发对象
window.dispatchEvent(newStorageEvent);
}
}
returnstorage.setItem(key,data);
}else{
//创建一个StorageEvent事件
varnewStorageEvent=document.createEvent('StorageEvent');
conststorage={
setItem:function(k,val){
sessionStorage.setItem(k,val);
//初始化创建的事件
newStorageEvent.initStorageEvent('setItem',false,false,k,null,val,null,null);
//派发对象
window.dispatchEvent(newStorageEvent);
}
}
returnstorage.setItem(key,data);
}
}
还有一个简单封装监听localStorage
2.在A组件中调用——写入缓存
this.$addStorageEvent(2,"user_info",data);
或者
this.resetSetItem('watchStorage',jsonObj);
3.在B组件中监听
window.addEventListener('setItem',(e)=>{
console.log(e);
});
或者
window.addEventListener('setItem',()=>{
this.newVal=sessionStorage.getItem('watchStorage');
vardata=JSON.parse(this.newVal)
console.log(data)
})
以上就是vue项目如何监听localStorage或sessionStorage的变化的详细内容，更多关于vue项目监听localStorage或sessionStorage的资料请关注毛票票其它相关文章！
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短