2024年03月27日 微信浏览器返回刷新 禁止微信网页刷新 微信返回保留页面数据 微信返回上页不刷新 sessionStorage的用法 sessionStorage怎么使用 懒猪技术
今天遇到一个坑，具体情况如下：
微信浏览器中访问列表页面，点击其中详细页然后返回上一页，然后发现页面是直接刷新了，并没有停留在列表页面原来的位置。而且列表页面数据又是通过ajax加载获取更多的效果，这就造成了当我返回列表页面时后面加载出来的数据没有了，又要重新点击加载，滑啊滑~~~~~~~~~~
于是度娘了一下，看了一些网友解决文章，看起来有点复杂。但是最终还是要用HTML5的新属性来解决。没办法，微信有时候就是坑(ಥ﹏ಥ)
于是用了sessionStorage，sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在每次ajax加载的时候，保存已加载的列表HTML和scrollTop的位置，然后在页面每次刷新的时候，再还原原来的HTML和scrollTop的位置。
考虑到页面会有get筛选参数或者再次重新打开的可能，所以还要需要判断返回后的页面url 和上一次的页面url 是否一致，否则每次打开相同的页面都会使用sessionStorage已保存的HTML。如果ajax分页还需要考虑全局的分页参数。
这种解决方法没有改动服务器代码，只改进了前端的加载逻辑。
总体分为两部分，第一部分是触发加载函数时一并保留数据、
//触发加载函数时保留数据
sessionStorage.setItem("list_ul", $("#list_ul").html());
sessionStorage.setItem("top",document.body.scrollTop);
sessionStorage.setItem("page",obj.page-1);
sessionStorage.setItem("url",window.location.href);第二步是在页面重新加载时读取已经保留的数据
//页面重新加载时读取已经保留的数据
window.onload = function()
{
//返回上一页已浏览html和top位置
if(window.sessionStorage){
var top = parseInt(sessionStorage.getItem("top"));
top = top?top:0;
var product_ul = sessionStorage.getItem("list_ul");
var page = parseInt(sessionStorage.getItem("page"));
var url = sessionStorage.getItem("url");
//判断返回后的页面和上一次的页面地址是否一致
if(product_ul != null && url==window.location.href){
$('#list_ul').html(product_ul);
document.body.scrollTop = top + parseInt($(window).height());
obj.page = page;
}
}
}以前以为微信浏览器不会缓存页面的图片，但是测试是缓存的。如果不缓存页面图片，那么页面打开就会很慢。
好了，就是这么简单，你学废了吗？
本文链接：http://so.lmcjl.com/news/516/