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內容顯示到頁面的時候，會自動回到原來的位置，不須要再從新定位了。