我有一个下拉列表,它是动态填充的。我发送一些ajax请求并获得响应,并根据条件填充下拉列表。现在,我需要将这些填充的列表存储在localStorage中,因为我需要显示先前在页面刷新时填充的值。
一切正常,除了我只获得下拉列表中填充的最后一个值。并非以前填充的所有值。我需要检索以前填充的所有值。
index.jsp
<input type="radio" class="radioButton" value="Display all" checked onclick="fnCheck();"> Display All
<input type="radio" class="radioButton" value="Display Divisions" onclick="fnCheck();"> Display Divisions
<input type="radio" class="radioButton" value="Display Data" onclick="fnCheck();"> Display Data
<select id="convoy_list">
<option>Values</option>
</select>
<input type="button" id="testbtn" value="Test" onclick="fnClickTest();" >
<input type="button" id="ok" value="OK" onclick="fnOK();" >
<input type="button" id="Refresh" value="Refresh" onclick="fnDisplay();"
myjs.js
function test(){
$.ajax({
//some requests and data sent
//get the response back
success:function(responsedata){
for(i=0;i<responsedata.data;i++):
{
var unitID=//some value from the ajax response
if(somecondition)
{
var select=$(#convoy_list);
$('<option>').text(unitID).appendTo(select);
var conArr=[];
conArr=unitID;
test=JSON.stringify(conArr);
localStorage.setItem("test",test);
}
}
}
});
}
在另一个函数中说display()我尝试检索localStorage值
function display(){
if(localStorage.getItem("test")){
var listId=$(JSON.parse(localStorage.getItem("test")));
var select=$(#convoy_list);
$('<option>').text(listId).appendTo(select);
}
在此,如果下拉列表中填充的数据是实例的C1 C2和C3。刷新页面后,下拉菜单中仅填充C3。我希望所有值(即C1,C2,C3)在刷新后填充回去。我怎样才能做到这一点?
正如David所说,您正在覆盖localStorage中的项目。您命名的密钥应该始终是唯一的。密钥的值在每次迭代时都会更改,但密钥名称不会更改。因此,要存储它,您将需要在每次迭代中使用具有不同名称的键。而不是使用
localStorage.setItem("test",test);
使用
localStorage.setItem("test"+i,test);
这绝对不会覆盖。并且在检索时在display()中使用它
function display(){
for(var i=0;i<localStorage.length;i++){
if(localStorage.getItem("test"+i)){
var listId=$(JSON.parse(localStorage.getItem("test"+i)));
var select=$(#convoy_list);
$('<option>').text(listId).appendTo(select);
}
}
}
这会将所有值附加到以前填充的下拉列表中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句