sessionstage和localstage的应用实例

这边在东财接手的helpcenter2.0遇到个很有意思的问题，搜索后的搜索结果在回退的时候需要保存，说到底可以保存keyword在做ajax或者保存好上一次的搜索结果，但是问题的关键是回退需要保存但是到了第一页的原生的app界面需要把这个保存的缓存清楚，localstage不会清除，但是sessionstage会清除而且会返回null。下面直接上代码：

  if (window.sessionStorage.getItem("searchResultSave") != null && window.sessionStorage.getItem("searchResultSave").replace(/(^\s*)|(\s*$)/g, "") != "" && window.sessionStorage.getItem("searchResultSave") != "请输入关键字搜索")
            {
          
                       
                        
                        $("#UlContent li").remove();
                        $("#UlContent li").removeAttr("padding");

                        $("#SearchResult").html("");
                        $("#SearchResult").html("搜索结果");
                        $("#UlContent").append(window.sessionStorage.getItem("searchResult1"));
                        $("#SearchResult").css("margin-top", "");
                        $("#SearchResult").css("margin-bottom", "");
                        $("#SearchResult").css("text-align", "");
                        $("#SearchResult").css("border-bottom", "1px solid #e2e3e7");

                        $("#selection").hide();
                        $("#content").show();


            }

  这边还要判断是不是误保存了"请输入关键字搜索"以及空格，这边的keyword保存在点击事件后做的，如下：

  if (CheckChinese($("#search_content").val())) {
                   
                    if ($("#search_content").val() != preKeyword) {//防止FF发送多次ajax请求

                        preKeyword = $("#search_content").val();
                       <strong><span style="color:#ff0000;"> window.sessionStorage.setItem("searchResultSave", $("#search_content").val());</span></strong>
                       
                        $.ajax({
                            type: "POST",
                            anync: false,
                            url: "HelpCenterSuggestion.ashx",
                            cache: false,
                            dataType: "text",
                            data: { m: $("#search_content").val() },
                            success: function (result) {
                               
                                window.sessionStorage.setItem("searchResult1", result);

                                $("#UlContent li").remove();
  
                               
                                if (result.indexOf("匹配信息，请重新输入") > -1) {
                                    $("#SearchResult").html("");
                                    $("#SearchResult").html(result);
                                    $("#SearchResult").css("margin-top", "80px");
                                    $("#SearchResult").css("margin-bottom", "80px");
                                    $("#SearchResult").css("text-align", "center");
                                    $("#SearchResult").css("border-bottom", "");
                                }
                                else {
                                    $("#SearchResult").html("");
                                    $("#SearchResult").html("搜索结果");
                                    $("#UlContent").append(result);
                                    $("#SearchResult").css("margin-top", "");
                                    $("#SearchResult").css("margin-bottom", "");
                                    $("#SearchResult").css("text-align", "");
                                    $("#SearchResult").css("border-bottom", "1px solid #e2e3e7");
                                }
                                $("#SearchResult").show();

                            }

                        });
                    }
                 }

而一旦取消和删除以及失去焦点也需要把keyword清空，如下：

  function EraseInputText() {

            $('input:text').val("");
            $("#UlContent li").remove();
            $("#UlContent").append(preLi);
            $("#SearchResult").hide();
            $('input:text').focus();
         <strong><span style="color:#ff0000;">   window.sessionStorage.setItem("searchResultSave", "");
            window.sessionStorage.setItem("searchResult1", "");</span></strong>
        }

        function InputBlur() {
           

            $('input:text').val(""); $('input:text').val("请输入关键字搜索");
            $('input:text').css("color", "#CCCCCC");

            $("#close").hide();
            $("#cancel").hide();
            $("#parent").css("padding-right", "0px");
            $("#content").show();


            $("#UlContent li").remove();
            $("#UlContent").append(preLi);
           
            $("#SearchResult").hide();
         <strong><span style="color:#ff0000;">   window.sessionStorage.setItem("searchResultSave", "");
            window.sessionStorage.setItem("searchResult1", "");</span></strong>

        }

   //搜索关键字得到焦点去除提示
        $('input:text').each(function () {
            var txt = $(this).val();

            $(this).focus(function () {
               <span style="color:#ff0000;"><strong> window.sessionStorage.setItem("searchResultSave", "");
                window.sessionStorage.setItem("searchResult1", "");</strong></span>
                //if (txt == $(this).val())
                    $(this).val("");
                $(this).css("color", "#000");
                $("#close").show();
                $("#cancel").show();

                $("#parent").css("padding-right", "50px");
                if ($("#search_content").val() == "") {

                    $("#content").hide();
                }

            })
        });

      

  这边的清空都要包括keyword和搜索结果，好了，这样完美了，退出后再进去sessionstage就会变为null，回到前一页只要在ready里把后一个页面的sessionstage清空就行，而localstage也有它的特殊用途，用来记录切换选项卡，如下：

 $("#problem").click(function () {

         
            if (PTid != undefined) {
                //$("#description").removeClass("cb-disable selected").addClass("cb-disable");
                //$("#problem").removeClass("cb-enable").addClass("cb-enable selected");
                $("#problem").addClass("at");
                $("#description").removeClass("at");
                //window.location.hash = "program";
           <strong><span style="color:#ff0000;">     window.localStorage.setItem("keyword", "program");</span></strong>
                $.ajax(
        {
            type: "post",
            url: "./HelpCenterTabSwitch.ashx",
            data: "type=6&flag=1&tid=" + encodeURI(encodeURI(PTid)),
            cache: false,
            dataType: "text",
            success: function (msg) {

                $("#selection").show();
                $("#UlContent li").remove();
                $("#UlContent").append(msg);


            }
        });
            }

        });

 每次点击都记录，然后在ready里面做判断：

<strong><span style="color:#ff0000;"> if (window.localStorage.getItem("keyword") == "program" && typeof (flag) != "undefined") {</span></strong>
                //$("#description").removeClass("cb-disable selected").addClass("cb-disable");
                $("#problem").addClass("at");
                $("#description").removeClass("at");


                $.ajax(
        {
            type: "post",
            url: "./HelpCenterTabSwitch.ashx",
            data: "type=6&flag=1&tid=" + encodeURI(encodeURI(PTid)),
            cache: false,
            dataType: "text",
            success: function (msg) {

                $("#selection").show();
                $("#UlContent li").remove();
                $("#UlContent").append(msg);


            }
        });
            }

  在这个项目里各有用处，但是 明显做过之后对h5的这个特性更了解了。