js缓存列表位置信息

公告方法，本地存储函数

saveLoaded: {
    // 累积数组的方法
    saveDataToArr: function(publicArr, dataArr) {
      publicArr = publicArr.concat(dataArr);
      return publicArr;
    },
    // 将数据保存到sessionStorage的方法
    saveDataToSession: function(key, value) {
      value = JSON.stringify(value);
      sessionStorage.setItem(key, value);
    },
    // 获取sessionStorage的方法
    getDataFromSession: function(key) {
      return JSON.parse(sessionStorage.getItem(key));
    },
    // 删除sessionStorage的方法
    cleanData: function(key) {
      sessionStorage.clear(key);
    }
  },

先定义好需要缓存的变量

var publicArr = [];

var pageNo = 1;

var titleIndex = JSON.parse(sessionStorage.getItem('titleIndex')) || null; //头部标题索引

var titleTagId; //头部标题 id

var saveObj = {};

var isLoad = true;

var isWeixin = utils.isWeixin();

在点击列表进入详情页的时候将数据放入 saveObj 中缓存，把列表数据放入 publicArr

publicArr = utils.saveLoaded.saveDataToArr(publicArr, r.data); //积累数组

listClick(); // 调用点击事件

function listClick() {
    //点击事件
    $('.list-content').click(function(e){
      saveObj = {
        // 列表数组
        array: publicArr,
        // 列表分页
        pageNo: pageNo,
        // 滚动条位置
        scrollTop: isWeixin ? $('body').scrollTop() : document.documentElement.scrollTop, 
        // 头部标题的id 
        titleTagId: titleTagId,
        // 头部导航条的移动位置
        translates: translates,
      };
      // listTxt为缓存的数组
      utils.saveLoaded.saveDataToSession('listTxt', saveObj);
      // 用titleIndex来判断是否有缓存的情况
      sessionStorage.setItem('titleIndex',JSON.stringify(titleIndex));
      // 跳转页面
      var listId = $(this).data('id');
      location.href = '#/home/detail?id='+listId;
    });
  }

当点击列表页进入详情页再返回的时候

// 有缓存
if(titleIndex){
      // 获取sessionStorage的方法
      if (utils.saveLoaded.getDataFromSession('listTxt')) {
        // 拿到缓存的数据
        var listObj = utils.saveLoaded.getDataFromSession('listTxt');
        var listData = listObj.array;
        // 缓存的分页
        pageNo = listObj.pageNo;
        // 缓存的数组
        publicArr = listData;
        // 缓存的头部标题id
        titleTagId = listObj.titleTagId;
        // 缓存的导航条位置
        translates = listObj.translates;
        $('.content-title-con').css("transform","translate3d("+translates+"px,0px,0px)");

        var listTxt ={};
        listTxt.contentList = [];

        // 遍历 listData 数组拿数据
        _.each(listData, function(item,index) {
          var contentObj = {
            id: item.id,
            title: item.title,
            creationTime: item.creationTime.substring(0,10),
            source: item.source,
          }
          if (item.url) contentObj.url = item.url;
          try {
            contentObj.picture = JSON.parse(item.picture)[0].fileUrl;
          } catch (error) {
          }
          listTxt.contentList.push(contentObj);
        });


        $('.content-item').html(_.template(__inline('home_temp/content_temp.html'), listTxt));
        
        // 判断是在微信还是浏览器
        if (isWeixin) {
          $('body').scrollTop(listObj.scrollTop);
        } else {
          $('html').scrollTop(listObj.scrollTop);
        }
        
        // 调用点击事件
        listClick();
        
        // 清除缓存
        utils.saveLoaded.cleanData('listTxt');
        utils.saveLoaded.cleanData('titleIndex');
      } else {
        getCmsList(menuList[titleIndex].id, true);
      }

    }else{
      getCmsList(); // 首次进入页面的显示效果
    }

js缓存列表位置信息

猜你喜欢