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

  • 相关阅读:
    [转]window.open居中
    WebService实例一
    开发步骤
    ubuntu命令
    ubuntu如何添加软件源
    WebService学习笔记
    android.view.WindowManager$BadTokenException: Unable to add window token null is not for an application
    Dialog的使用
    区分Activity的四种加载模式
    在android 中导入项目后 包出现错误
  • 原文地址:https://www.cnblogs.com/qidian10/p/5785825.html
Copyright © 2011-2022 走看看