localStorage 不适用于 html5 中的所有字段？

Question

大家好，我正在处理 codeigniter 项目，在我的一个表单上，我正在使用 localstorage 存储选定的值并在页面加载后显示。 但不知何故，它不适用于我所有的领域。 有时第一个值会起作用，有时最后一个值会起作用。 我总共有 4 个字段，所有值都应该存储在本地存储中。

HTML部分：

 <div class="control-group">
          <label class="control-label">Select Month</label>
          <div class="controls">
            <select id="month" name="month">
              <option  value="">--Select Option--</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">Select Year</label>
          <div class="controls">
            <select id="year" name="year">
              <option  value="">--Select Option--</option>
              <option>2017</option>
              <option>2016</option>
              <option>2015</option>                 
              <option>2014</option>                 
              <option>2013</option>
              <option>2012</option>
              <option>2011</option>                 
            </select>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">Select Employee</label>
          <div class="controls">               
            <select id="employee" name="employee_name">
              <option  value="">--Select Option--</option>
            <?php 
              foreach ($salary  as $row) {?>
              <option value='<?php echo $row->EMPLOYEE_ID;?>'><?php  echo $row->EMPLOYEE_NAME;}?></option>                 
            </select>            
          </div>
        </div>
              <div class="control-group">
          <label class="control-label">Select Country</label>
          <div class="controls">               
            <select id="country" name="org_id">
              <option  value="">--Select Option--</option>              
              <option  value="40">UK</option>        
              <option  value="41">INDIA</option>
              <option  value="47">POLAND</option> 
              <option  value="57">GERMANY</option>  
            </select>            
          </div>
        </div>

到目前为止，只有第一个月份的字段正在工作。在表单加载时，只有其选定的值存储在本地存储中。其余的都在下拉列表中显示空白。 Javascript代码：

  <script type="text/javascript">
    var editingArea = document.getElementById("month");
    var editingArea1 = document.getElementById("year");
    var editingArea2 = document.getElementById("employee");
    var editingArea3 = document.getElementById("country");

var KEY = "storageKey";
var text = localStorage.getItem(KEY);
if(text !== null){
        editingArea.value = text;
}
var KEY = "storageKey";
var text1 = localStorage.getItem(KEY);
if(text1 !== null){
        editingArea1.value = text1;
}
var KEY = "storageKey";
var text2 = localStorage.getItem(KEY);
if(text2 !== null){
        editingArea2value = text2;
}
var KEY = "storageKey";
var text3 = localStorage.getItem(KEY);
if(text3 !== null){
        editingArea3.value = text3;
}

// whenever the textarea is updated, store the contents also into the storage
editingArea.addEventListener("click", function(event){
    localStorage.setItem(KEY,editingArea.value);
},false);
editingArea1.addEventListener("click", function(event){
    localStorage.setItem(KEY,editingArea1.value);
},false);
editingArea2.addEventListener("click", function(event){
    localStorage.setItem(KEY,editingArea2.value);
},false);
editingArea3.addEventListener("click", function(event){
    localStorage.setItem(KEY,editingArea3.value);
},false);


var resetButton = document.getElementById("reset");
resetButton.addEventListener("click", function(event){
    localStorage.setItem(KEY,"");    
    editingArea.value = "";
    editingArea1.value = "";
    editingArea2.value = "";
    editingArea3.value = "";
},false);


  </script>

Answer 1

您对所有字段都使用相同的var KEY = "storageKey";。对各个字段使用不同的keys。