解决微信浏览器回退刷掉ajax数据

这样一个场景：我们在微信浏览一个列表，列表的数据下拉通过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=/";  
    }

2、在列表页引入一下javaScript代码

<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步即可