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

原文地址:https://www.cnblogs.com/qidian10/p/5785825.html