Question

问题在于，当我关闭浏览器并再次测试它确实会显示该值时，但是当我刷新页面时，它不会向用户显示先前已选择的值，但localStorage会存储数据。

<form id="suspendedProperties">
        <label for="stationDropdown">Select Station:</label>
        <select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent(this.id,this.value)" >
            <option value="50028000">Tanama River</option>
            <option value="50010500">Rio Guajataca, Lares</option>
            <option value="60008002">Example River2</option>
            <option value="60008003">Example River3</option>
            <option value="60008004">Example River4</option>
         </select>


        <label for="sampleMediumDropdown">Select Sample Medium:</label>
            <select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent(this.id,this.value)">
              <option value="WS">WS(Surface Water)</option>
              <option value="WSQ">WSQ(Surface Water QC)</option>
            </select>

        <label for="date">Begin Date:</label>
            <input naem="date" id="beginDate" type="date" onChange="storeLocalContent(this.id,this.value)" />

         <label for="hydroEvent">Hydrologic Event:</label> <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent(this.id,this.value)" >
                                <option value="4">4- stable, low stage</option>
                                <option value="5">5- falling stage</option>
                                <option value="6">6- stable, high stage</option>
                                <option value="7">7- peakstage</option>
                                <option value="8">8- rising state</option>
                                <option value="9" selected>9- stable, normal stage</option>
                                <option value="A">A- Not Determined</option>
                                <option value="X">X- Not applicable</option>  
                              </select>

    <label for="containerCuantity">Add: </label><input type="number" min="1" value="1" id="containerCuantity"onChange="storeLocalContent(this.id,this.value)"/> 
    <select id="singleMultiContainer"name="singleMultiContainer" onChange="storeLocalContent(this.id,this.value)">
                                            <option value="single">Single container sample</option>
                                            <option value="multi">Multiple sets container</option>
                                           </select>

    <h4 >Analyses Requested:(Applies to all samples)</h4>

      <label for="analysesC">Concentration</label><input type="checkbox" name="analysis" id="analysesC" value="C" onChange="isChecked(this.id,this.value)"/>
      <label for="analysesSF">Sand-Fine break**</label><input type="checkbox" name="analysis" id="analysesSF" value="SF"onChange="isChecked(this.id,this.value)"/>
      <label for="analysesSA">Sand Analysis**</label><input type="checkbox" name="analysis" id="analysesSA"value="SA" onChange="isChecked(this.id,this.value)"/>
    <label for="analysesT">Turbidity</label><input type="checkbox" name="analysis" id="analysesT" value="T" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesLOI">Loss-on-ignition**</label><input type="checkbox" name="analysis" id="analysesLOI" value="LOI" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesDS">Dissolved Solids</label><input type="checkbox" name="analysis" id="analysesDS"value="DS" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesSC">Specific Conductance</label> <input type="checkbox" name="analysis" id="analysesSC" value="SC" onChange="isChecked(this.id,this.value)"/>                                  
     <label for="analysesZ">Full-size fractions**</label><input type="checkbox" name="analysis" id="analysesZ"value="Z" on onChange="isChecked(this.id,this.value)"/>


    </form>

这是我的localStrg.js：

var ls = window.localStorage;

function initialize(){
    //Check if browser supports localStorage
    if(!Modernizr.localstorage){
        alert("Your browser will not store data, please change or update your current browser");
        return false;
        }

    if(ls.length!= 0){
        for(i=0;i<ls.length;i++){
            getData(ls.key(i));
            alert(ls.key(i));
        }
    }
}
function storeData(id,value){
    ls.setItem('#'+id,value);
    alert("Item saved"+' '+'#'+id);
}

function getData(id){
    $(id).val(ls.getItem(id));
    $(id).selectmenu('refresh');
}

$(document).ready(function(e) {
    initialize();
});

我想要做的就是向用户显示他们之前在各自字段中选择的值。

例如，如果他在下拉列表中选择选项4并刷新页面，则应在下拉列表中看到选项4，而不是选项1。

Answer 1

代码没关系，错误是我初始化JQuery Mobile时的错误：

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>

这给了我JQuery的所有默认值，然后它从localStorage加载我的值。我所要做的就是在初始化jquery mobile之前更改localStorage.js的脚本。

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

您可以找到更详细的解释here

如何使用jQuery预先选择基于localStorage的复选框和复选框

1 个答案: