在localStorage中存储和检索动态填充的下拉列表

Store and retrieve the dynamically populated drop-down list in a localStorage

本文关键字：动态 填充 下拉列表 检索 localStorage 存储      更新时间：2023-09-26

我有一个动态填充的下拉列表。我发送一些ajax请求并获得响应，并根据条件填充下拉框。现在我需要将这些填充的列表存储在localStorage中，因为我需要在页面刷新时显示先前填充的值。

一切正常，除了我只得到下拉列表中填充的最后一个值。不是之前填充的所有值。我需要检索之前填充的所有值。

<

index . jsp/strong> 

<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);
    }
  }
}

这将在之前填充的下拉列表中添加所有值。

每次迭代都会覆盖本地存储中的项，因为键总是'test'。

您可以将密钥更改为:

localStorage.setItem("test-"+i,test);

这将使它们唯一，并且所有值都将被存储。您可能需要将关键字更改为更具描述性的内容。

或者您只是存储ajax调用的响应，然后创建一个形成下拉列表的函数，该函数可以在ajax成功和显示函数中调用。

相关文章：