vue里面简单的数据缓存

先给一种原始的方法sessionStorage或者localStorage

先说一下实现原理:

比如分页,你从第2页进入详情页

vue里面简单的数据缓存

返回为了方便用户体验,肯定最好能回到当前这一页

我用的分页是elementui的分页,可以在分页切换的时候把页码缓存下来

handleCurrentChange(val){
      this.listQuery.pageNo=val;
      sessionStorage.setItem('currentPage',this.listQuery.pageNo);//重点在这里
      this.getSchoolWebModuleMessageListFunc();
    },

你进入详情页的时候或者编辑页的时候你可以给一个标识,可以相同例如

sessionStorage.setItem("detail",true); 

然后你进入列表(就是有分页的那个页面)

if(sessionStorage.getItem('detail')){
 //上面这个就是去到详情页或者编辑页的标识// 
//如果有这个就读取缓存里面的数据
 this.listQuery.pageNo=Number(sessionStorage.getItem("currentPage"));
}else{ 

  this.listQuery.pageNo=1;
  //这个主要是从其他页面第一次进入列表页,清掉缓存里面的数据
  sessionStorage.removeItem("currentPage");
}

其实还有一个bug就是你已经跑过详情页,浏览器缓存里面已经有detail,你从其他页面再次想第一次那样进入,你本身应该不需要缓存里面的数据

你可以在离开列表页面的时候去掉detail,如下:

destroyed(){
    sessionStorage.removeItem("detail");
  },

 

上一篇:假分页


下一篇:[RN] React Native 实现 FlatList上拉加载