返回信息流页面重新加载问题

  近期做了一个移动端项目,首页为信息流列表,在检测过程中,微信端进入详细页,返回到信息流页面,每次数据重新加载,不能定位到最后一次点击的信息位置,严重影响体验。

  针对这个问题,百般询问度娘,终于解决,已分享给大家,共勉。

主要运用知识点:

  • window.sessionStorage.setItem()

  • window.sessionStorage.getItem()

  • window.sessionStorage.removeItem()

解决步骤:

<script src="js/jquery.js"></script>添加到页面

1、本地存储 window.sessionStorage.setItem

首先是ajax异步加载,每次滚动到底部就加载信息,这个不关键,为了减少监听次数,我们可以为每条信息的a链接添加监听事件,即链接触发时,将加载的所有信息,缓存到本地
newBox.on('click', 'a', function() {
var html = newBox.html();
var session = {html : html};
var str = JSON.stringify(session);
window.sessionStorage.setItem('pageCont', str);
});

2、页面返回 window.sessionStorage.getItem

获取存储带本地的所有信息
var str = window.sessionStorage.getItem('pageCont');
var obj = JSON.parse(str);
var html = obj.html;
newBox.html(html); // 渲染dom元素

3、移除本地存储 window.sessionStorage.removeItem

渲染信息后移除以便清除空间留着下次再用;

window.sessionStorage.removeItem('pageCont');

就用这三步就搞定了,大家试试吧。
原创文章,转发请标注出处,如有问题,请指教,大家共同进步。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值