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的资料请关注毛票票其它相关文章！