Vue页面的数据缓存实现
Vue在非单页面页面使用时,在列表页这类需要跳转的页面,如果直接会导致原页面重新刷新,这个体验相当差。所以我们需要把数据缓存起来。
实现的方法:将Vue数据通过sessionStorage 缓存起来,页面加载的时候更新。
var App=new Vue({
el:"#App",
data:function (){
return {
a:1,
b:2,
c:3
}
},
created:function(){
if(!this.getCache()){
this.getPage();
}
},
methods:{
getPage:function(){
this.a=111;
},
setCache:function(){
var k="page-ershou_wan-index";
var v=this.$data;
v.expire=Date.parse(new Date())/1000+120
sessionStorage.setItem(k,JSON.stringify(v));
},
getCache:function(){
var k="page-ershou_wan-index";
var res=sessionStorage.getItem(k);
if(res!=null){
var d=JSON.parse(res);
if(Date.parse(new Date())/1000>d.expire){
return false;
}
for(var i in this.$data){
for(var j in d){
if(i==j){
this.$data[i]=d[j]
}
}
}
return true;
}
return false;
},
}
})