Vue页面的数据缓存实现
html5 未结
0
2
雷锋吧
雷锋吧
2022年11月10日

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


消灭零回复