Vue中使用sessionStorage导致的问题
发布于 7 年前 作者 axl-axl 6566 次浏览 来自 问答
粉丝福利 : 关注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));
			})
		}

求大神指点迷津。。

回到顶部