利用localStorage保存文章详情页已读位置

2017-09-28  本文已影响0人  SherryWu7

保存当前阅读位置

saveScrollTop: function (key, param) {
      var flag = false;
      var scrollTopList = Utils.getCache(key);  // 获取已经保存过的scrollTopList
      var data = [];
      if (!scrollTopList) {   // 没有存储记录
        data.push(param);
        Utils.saveCache(key, data);
      } else {
        for (var i = 0; i < scrollTopList.length; i++) {    // 循环已有的scrollTopList
          if (scrollTopList[i].classId === param.classId) {  // 查出相同文章ID的记录并更新它的scrollTop值
            scrollTopList[i].top = param.top;
            flag = true;
            break;
          }
        }
        if (!flag) {  // 在scrollTopList中没有相关记录的Id,把接收到的param push到scrollTopList中
          scrollTopList.push(param);
        }
        Utils.saveCache(key, scrollTopList);   // 保存
      }
    },

在退出详情页时保存当前scrollTop

var param = {
  classId: 123,  // 当前文章id
  top: 640    // 当前文章的scrollTop
};
saveScrollTop('courseScrollTop', param);

获取阅读详情位置

getScrollTop: function (key, classId) {
      var scrollTopList = Utils.getCache(key);
      var scrollTop = 0;
      if (!scrollTopList) {
        return;
      }
      for (var i = 0; i < scrollTopList.length; i++) {   // 循环已有的scrollTopList 
        if (scrollTopList[i].classId === classId) {  // 查出相同文章ID的记录并获取到它的scrollTop值
          scrollTop = scrollTopList[i].top;
          // $$(element).scrollTop(scrollTopList[i].top);
          break;
        }
      }
      return scrollTop;
    },

在进入详情页时获取当前scrollTop

var scrollTop = getScrollTop('courseScrollTop', classId);
$('#detail').scrollTop(scrollTop);

注意

在进入页面设置文章的scrollTop时,要确保页面的图片等已经加载显示,不然设置的scrollTop会不准确~

上一篇 下一篇

猜你喜欢

热点阅读