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"]";
    }