这样一个场景:我们在微信浏览一个列表,列表的数据下拉通过ajax加载数据,绑定在后面,当点击某一选项时,跳到详细信息页面,返回列表页是发现,通过ajax加载出来的数据被刷掉了。那怎么解决这个问题呢?想了许久,可以用两个方法解决。使用cookie 和history解决。这里介绍的是cookie解决这个问题。history看下一篇。
思路:在跳转详细页的时候,用cookie记录下ajax加载出来的数据,直接把列表通过字符串的形式保存到cookie里面,并且记录当前列表页的位置;当从详细页回退到列表页,就把cookie中的数据取出来,并且滚到记录的位置。
1、要用cookie记录数据,首先需要写个操作cookie的方法(可以弄成一个js文件,这样也方便以后使用):
//写cookies
function setCookie(days, name, value) {
var exp = new Date();
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + "; path=/";
}
//读取cookies
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
//删除cookies
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + "; path=/";
}
<script type="text/javascript">
//声明当前列表页面距离顶部的高度
var temscrolltop = 0;
var str = "ProjectListscrollTop";//定义距离顶部的高度存储Cookie的名字
//获取保存好的Ajax加载的数据,如果不存在,赋值为空
var ProjectListAjaxData = sessionStorage.getItem("ProjectListAjaxData");
if (ProjectListAjaxData == null) {
ProjectListAjaxData = "";
}
$(document).ready(function () {
//判断是否是从详细页面返回
if ($.cookie("ProjectListPosition")) {
//使用完马上删除
delCookie("ProjectListPosition");
//页面回跳插入ajax加载 data
if (ProjectListAjaxData != null && ProjectListAjaxData != "") {
$("#productlist").append(ProjectListAjaxData); //把cookie数据放进列表
//lazyload();
}
else {
ProjectListAjaxData = "";
}
//页面回跳跳转的位置
if ($.cookie(str)) {
$("#content").animate({ scrollTop: $.cookie(str) }, 0);
}
else {
}
}
else {
delCookie("ProjectListPosition");
delCookie("ProjectListscrollTop");
//清除缓存页面数据session
ProjectListAjaxData = "";
sessionStorage.removeItem("ProjectListAjaxData");
}
});
//页面滚动获取滚动条距离顶部的距离
window.onscroll = function() {
temscrolltop = window.scrollY;
//console.info(window.scrollY);
}
</script>
3、在跳转详细页面的时候记录当前位置,也就是写在跳转的函数里面:
$.cookie(str, temscrolltop, { path: '/' }); //cookie记录滚动位置
4、在详细页面写入一下代码,用于标记是详细页面,在回退后列表页就可以根据该标记判断,从而加载存储在cookie里面的数据。
setCookie(1,"ProjectListPosition",true);
function setCookie(days, name, value) {
var exp = new Date();
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + "; path=/";
}
完成以上4步即可