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

Question

Hi guys im working on codeigniter project and on ane of my form i am using localstorage to store selected values and display after page load. But somehow its not working for all my fields. Sometimes first value get works sometimes last value works. I have total 4 fields and all values should be stored in localstorage.

Html part:

 <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>

Till now only first field that is months is working.On form load only its selected value is stored in localstorage. Rest of all shows blank space in dropdown. Javascript code:

  <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

You are using same var KEY = "storageKey"; for all the fields. Use different keys for individual fields.