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

保存当前阅读位置

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会不准确~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,173评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,324评论 19 139
  • 有两档演讲节目在观众中非常火,一个是国外的TED演讲,另一个则是北京卫视的《超级演说家》,这两档节目的一个共同点就...
    来郑坤茹阅读 2,948评论 0 4
  • 略微休息了一下,我们就和家人一起出发去吃晚餐。63酒店地处加雅街,就餐非常方便,酒店斜对面就是一家“富源”餐厅,不...
    红豆汉堡阅读 1,365评论 0 1