解决微信浏览器回退刷掉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步即可