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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值