Vue中使用sessionStorage导致的问题
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
我在vue的一个模块当中使用了sessionStorage来储存数据,这个数据本身只有35k左右。然后我从这个模块跳转其他模块的时候就会出现停顿。从后台捕捉的信息来看,他是停顿了一会再发出的请求。这就导致了我的页面有一个明显的卡顿情况。我只在开始的时候执行了一次保存,后面并没有再对这个sessionStorage进行操作。然后我全局一共有4个sessionStorage对象,但是其他的三个一共不到10k。这是我的那个代码。
_toolInit(){//获取所有道具
let tooltal = sessionStorage.getItem('toolTotal');
if(tooltal){
Vue.set(this,'toolTotal',JSON.parse(tooltal));
return;
}
let tool=[];
let skill = this.ajax.get('/api/game/resource/?field=name&field=id',{params:{item:'ResSkill'}}).then((res)=>{
if(res.data.code !== 0){
alert('技能卡获取失败')
return false;
}
return res.data.data;
})
let item = this.ajax.get('/api/game/resource/?field=name&field=id',{params:{item:'ResItem'}}).then((res)=>{
if(res.data.code !== 0){
alert('道具获取失败')
return false;
}
return res.data.data;
})
let rune = this.ajax.get('/api/game/resource/?field=name&field=id',{params:{item:'ResRune'}}).then((res)=>{
if(res.data.code !== 0){
alert('符文获取失败')
return false;
}
return res.data.data;
})
let weapon = this.ajax.get('/api/game/resource/?field=name&field=id',{params:{item:'ResWeapon'}}).then((res)=>{
if(res.data.code !== 0){
alert('武器获取失败')
return false;
}
return res.data.data;
})
Promise.all([skill,item,rune,weapon]).then((res)=>{
res.forEach((value)=>{
if(value.length){
tool.push(...value)
}else{
return false;
}
})
Vue.set(this,'toolTotal',tool);
sessionStorage.setItem('toolTotal',JSON.stringify(tool));
})
}
求大神指点迷津。。