返回信息流页面重新加载问题-白红宇

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

阅读量：6255 次

发布时间：2019-06-22

本文共 904 字，大约阅读时间需要 3 分钟。

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

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

主要运用知识点：

解决步骤：

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');

就用这三步就搞定了，大家试试吧。

原创文章，转发请标注出处，如有问题，请指教，大家共同进步。

转载地址：http://nlxsa.baihongyu.com/

你可能感兴趣的文章