Html5 localstorage解决Ajax回退的坑
A页面通过ajax加载数据,并且是滚动加载效果,当滚动几个屏幕之后,进入新的链接页面B,再返回到A的时候,A页面的数据有需要重新加载,从头开始了,体验非常不好。
解决办法:1)hash;2)html5的history特性;3)localstorage/cookie等,综合而看localstorage是最简单的,不需要引入其他东西,简单改造即可实现。
//重置页面环境 function resetStatus() { var oldStatus = window.localStorage.getItem("goodStatus"); //如果本地没有存放数据,直接从头加载 if (oldStatus == null) { loadPdt(); return; } //提取本地存放的数据 var oldJson = JSON.parse(oldStatus); page = oldJson.page; if (oldJson.kw.length > 0) { $("#search_input").val(oldJson.kw); $("#search_text").hide(); $("#search_cancel").show(); } orderby = oldJson.order; ctgId = oldJson.ctgId; //----------- //something todo //----------- //直接将存储好的html显示到页面 $("#goodsList").html(window.localStorage.getItem("goodlist")); //清除本地数据,防止主动刷新 window.localStorage.removeItem("goodStatus"); window.localStorage.removeItem("goodlist"); } //替代之前的a链接直接跳转的方式,目的是将数据存储起来 function openPdtDetail(id) { //存储数据 window.localStorage.setItem("goodStatus", JSON.stringify({ page: page, kw: $.trim($("#search_input").val()), order: orderby, ctgId: ctgId })); window.localStorage.setItem("goodlist", $("#goodsList").html()); window.location.href = "/Mobile/Goods/Detail/" + id + "?sid=@Request["sid"]"; }
而且发现有一个好处,将html内容显示到页面的时候,会自动回到原来的位置,不需要再重新定位了。