Question

我正在尝试创建一个工作程序，等等......本地存储在prod即11中无法正常工作。它在Chrome中运行良好（我希望每个人都可以使用），并且在我测试它时也可以在Aptana的内部服务器版本中正常工作。
这是我的代码： jQuery的

function lsTest(){
    var test = 'test';
    try {
          localStorage.setItem(test, test);
          localStorage.removeItem(test);
          return true;
    } catch(e) {
        return false;
    }
}

$(document).ready(function(){
    $("#testbutton").click(function(){
                  var test = 'test';


        if(lsTest() === true){
            $("body").css("background", "blue"); 
            $("#test").html(" its here! ");
        }else{
            $("#test").html(" its BROKE! ");
        }


    });
});

            $(document).ready(function() { 

                hideElems();        
                testStorage();
                showSSO();

            });

function hideElems(){
    $(".functionalSelect,#inbound,#outbound").hide();
}

function selection(select){
functionSelect = select;

} 

function testStorage(){

    var alice = localStorage.getItem('functionthing');
    if(!localStorage.getItem('functionthing')) {
        populateStorage();
    }
    else if(localStorage.getItem('functionthing') == "OB"){ 
             $("#outbound").show();
             $(".success").html("You have selected Outbound");
             $("body").css("background", "grey");   
         }
         else if(localStorage.getItem('functionthing') == "IB"){  
                 $("#inbound").show();
                 $(".success").html("This means " + alice);
                 $("body").css("background", "#add8e6");
        }
    } 

    function populateStorage(){
        var divSet = '<div class="functionalSelect"> <p>Select your function </p>';
        var buttons = "<button onClick=selection('OB') class='Out'>Outbound</button> <span> </span><button onClick=selection('IB') class='In'>Inbound</button>";
        var end = "</div>";
        $(".selector").html(divSet + buttons + end);

    }

    //==============================================
    //Documenation functions 
    //=============================================     

    function documentationEntry(){
        var Label1 = '<label>SSO: </label><input type="text" id="SSO">';
        var Label2 = '<label> Dept: </label><input type="text" value = "frd" id="dept" readonly>';
        var select1 = '<span> </span><label>Site: </label><select id = "site"><option value="" disabled selected>Select your option</option>';
        var select2 = '<option value="can">Canton</option><option value="chl">Charlotte</option><option value="hyd">Hyderabad</option><option value="ket">Kettering</option><option value="man">Manila</option><option value="phx">Phoenix</option></select>';
        var selectButton = '<br /><br /><button id="sendInfo">Lock Info</button>';
        select1 += select2;



        $(".entryHeader").html(Label1 + Label2 + select1 + selectButton);

    }


    function showSSO(){
        var caterpiller = localStorage.getItem('SingleSignOn');
        var marchhare = localStorage.getItem('department');
        var queenofHearts = localStorage.getItem('entered_site');   

        if(!localStorage.getItem('SingleSignOn')) {
        documentationEntry();
        }else{
        $('.entryHeader').hide();


        $(".report").html(marchhare + "/" + queenofHearts + "/ ib/ stuff" + caterpiller);
        }

    }


        $(document).ready(function(){
            $("#sendInfo").click(function(){
                var SSO_Entry = $('#SSO').val();
                var entered_site = $('#site :selected').val();
                var dept = 'frd';

                if(!SSO_Entry || site == ""){

                    $(".report").html("Your Entry is incomplete");
                    $(".report").css("color", "red");
                }else{  
                        localStorage.setItem('department', dept);       
                        localStorage.setItem('entered_site', entered_site); 
                        localStorage.setItem('SingleSignOn', SSO_Entry);    
                        showSSO();  
                        $(".entryHeader").hide();
                        $(".report").html("");
                    }


                });
            });


    //===========================================
    //End documentaion functions 
    //===========================================       
    $(document).ready(function(){
        $(".functionalSelect").click(function(){


            if(functionSelect == "OB"){
                localStorage.setItem('functionthing', functionSelect);  
                        $(".success").html("your selection is Outbound");   
                         $("body").css("background", "grey");
                        }else if(functionSelect == "IB"){
                                  localStorage.setItem('functionthing', functionSelect);    
                                  $(".success").html("your selection is Inbound");  
                                  $("body").css("background", "#add8e6");       

                            }

                        $(".selector").hide();
                    });
                });

                $(document).ready(function(){
                    $(".clearit").click(function(){
                        localStorage.clear();
                        location.reload();
                    });
                });

CSS

#entryWrapper{
    width:600px;
    padding:5px;
    border:solid 1px black;
}
.clearit{
    float:right;

}

.success{
    height:50px;

}
.entryHeader{
    width:475px;
    height:75px;
    border:solid 1px black;
    padding: 5px;
}


.entryHeader input{
    width:100px;
}

HTML

<!DOCTYPE html>
<html>
<head>

  <title>Unicorn</title><meta http-equiv="X-UA-Compatible" content="IE=edge" 
  charset="UTF-8"/>


  <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
 <script>
 </script>
 <style>
 </style>

</head>
<body>
  <section id="entryWrapper">

  <button class="clearit">clear</button>    
  <section class="entryHeader"></section>

    <section class="report"></section>

  <section class = "selector"></section>

  <div id="inbound"> this right here is inbound</div>
  <div id="outbound">and this, kind sir, is outbound</div>


  <div class ="success"><p>Your selection will be shown here</p></div>
  </section>

  <div id="test"></div>
  <button id="testbutton">test me!</button>  

</body>

</html>

Answer 1

想通了。即当页面是本地页面时，它不会接受localStorage，它必须通过服务器位置。我将页面上传到服务器，它工作正常。奇怪的是Chrome会让你测试本地。还解释了为什么它在Aptana中正常工作。

HTML 5本地存储不支持ie 11（v 11.0.42），启用了DOM存储

1 个答案: