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; }, } })