项目sessionStorage的应用

项目需求,修复bug,微信应用,列表栏中,点击一项进入详情页,详情页点击返回按钮回到列表页中相应的位置(即点击进入详情页时的页面位置),bug所在为点击返回时,无法回到列表页相应位置。

从列表页进入“找人,找人”

项目sessionStorage的应用_第1张图片

进入详情页,点击返回按钮

返回时不是回到最开始进入的页面位置,而是刷新了列表页

项目sessionStorage的应用_第2张图片

跳转到详情页时,获取此刻$(window).scrollTop(),放到浏览器缓存sessionStorage中,命名为findpos

var aParam = {

            page: page,  //当前页码

            top: $(window).scrollTop()

};

aParam = JSON.stringify(aParam);//存在缓存的内容得是字符串,于是进行json转成字符串。

sessionStorage.setItem('findpos',aParam);

从详情页返回时,在列表页初始时判断是否存在这么个缓存,存在就获取缓存信息。不存在就刷新列表页。

let pos=JSON.parse(sessionStorage.getItem('findpos')); //放入缓存的内容是字符串形式,我这里转成JSON。之后就是$(window).scrollTop(pos.top);//界面拉到相应位置

搞定!回来时候别忘了把缓存清了sessionStorage.removeItem('findpos');

项目sessionStorage的应用_第3张图片

之后要解决的问题是,列表页一开始是只显示第一页,点击底部加载下一页才会加载出第二页,比如说我进入详情页时是处在列表页第二页某位置,那么返回时,依据之前所想,无法到达相应位置,因为第二页还没有加载出来,如何能到达相应位置?

点击加载进入第二页

之后第二页点击进入详情,

详情返回时,返回的位置是第一页的底部,无法到达第二页相应位置。

思路1:动态ajax

设置进入列表页时判断存在缓存,获取缓存中page值,得到要要去的页,发送ajax请求,请求出需要请求的页面,之后再进行scrollTop跳到相应位置。

结果:失败,能加载出第二页,但是scrollTop无法到达指定位置,还是只能到第一页的底部位置。当时还不明白这是为什么,后来项目完成了提交了之后细细思考才想到这是因为ajax的异步请求造成的,async属性默认是true,即异步,把这个属性设置成false(同步)就好了的。

思路2:缓存列表页

进入详情页时把列表页的内容都缓存下来,返回时把内容全部加载出来。

结果:成功(如果用户要看的信息很多很多的话就存在问题了),浏览器对缓存的大小存在限制,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。

这里说下缓存:

localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据。sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。

参考:https://www.cnblogs.com/jscode/p/3584550.html

你可能感兴趣的:(项目sessionStorage的应用)