缓存查询条件+分页+sorter

M18771556987

已于 2023-06-29 15:12:56 修改

阅读量419

点赞数

文章标签： javascript 页面条件参数缓存详情回列表条件缓存

于 2023-06-29 15:05:36 首次发布

本文链接：https://blog.csdn.net/weixin_36878452/article/details/131456616

版权

// 前往的页面路径
// 列表：case-manager/model-case-manager（离开页面,缓存条件,规则 "param:routeName"）
// 详情：case-manager/model-case-manager/model-case-detail?id=PJT202306069
// 前往页面时判断，如果sessionStorage缓存的key不在前往的路径[case-manager, model-case-manager, model-case-detail]中则，认为需要清除缓存的条件
// 
export const clearPageSessionStorage = function (path) {
  let pathArr = path
    .split('/')
    .filter(v => !!v)
    .map(v => 'params:' + v);
  let sessionKeys = Object.keys(sessionStorage).filter(v => v.startsWith('params:'));
  for (let i = 0; i < sessionKeys.length; i++) {
    if (!pathArr.includes(sessionKeys[i])) {
      sessionStorage.removeItem(sessionKeys[i]);
    }
  }
};

// afterEach 之后根据规则清除缓存的条件
router.afterEach(to => {
  setTimeout(() => {
    // 清除项目日程记录信息
    if (to.fullPath.indexOf('project-schedule') == -1) {
      sessionStorage.removeItem('scroll@project-schedule');
      sessionStorage.removeItem('pageParams@project-schedule');
    }
    // 清除缓存的列表条件
    clearPageSessionStorage(to.path);
  }, 0);
  NProgress.done(); // finish progress bar
});

 
 mounted() {
    // 取出缓存的条件
    let routeName = this.$route.name;
    this.routeName = routeName;
    let pageParams = sessionStorage.getItem('params:' + routeName);
    if (pageParams) {
      pageParams = JSON.parse(pageParams);
      this.sorter = pageParams.sorter;
      this.pagination = pageParams.pagination;
    }
  },
  beforeDestroy() {
    // 缓存条件
    let pageParams = {
      searchParams: this.searchParams,
      sorter: this.sorter,
      pagination: this.pagination
    };
    sessionStorage.setItem('params:' + this.routeName, JSON.stringify(pageParams));
  },