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内容显示到页面的时候，会自动回到原来的位置，不须要再从新定位了。