localStorage 不适用于 html5 中的所有字段?
localStorage not working for all fields in html5?
大家好,我正在处理 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>
到目前为止,只有第一个字段是月份 working.On 表单加载仅将其选择的值存储在本地存储中。其余的在下拉列表中显示空白 space。
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>
您对所有字段使用相同的 var KEY = "storageKey";
。对各个字段使用不同的 keys
。
大家好,我正在处理 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>
到目前为止,只有第一个字段是月份 working.On 表单加载仅将其选择的值存储在本地存储中。其余的在下拉列表中显示空白 space。 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>
您对所有字段使用相同的 var KEY = "storageKey";
。对各个字段使用不同的 keys
。