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

I have a drop down list which is populated dynamically. I send some ajax request and get response and based on a condition the drop-down is populated. Now I need to store these populated list in localStorage as I will need to display the values which were populated previously on page refresh.

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

Everything works fine except that I am getting only the last value populated in the drop-down list. Not all the values which were populated previously. I need to retrieve all the values which were populated previously.

一切正常，只是我只获取下拉列表中填充的最后一个值。并非所有先前填充的值。我需要检索之前填充的所有值。

index.jsp

的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

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

In another function say display() i try retrieving the localStorage values

在另一个函数中说display（）我尝试检索localStorage值

    function display(){
    if(localStorage.getItem("test")){
    var listId=$(JSON.parse(localStorage.getItem("test")));
    var select=$(#convoy_list);
        $('<option>').text(listId).appendTo(select);

    }

Here if the data populated in the drop down list is C1 C2 and C3 for an instance. After i refresh the page only C3 is populated in the drop-down . I want all the values ie C1,C2,C3 to be populated back after refresh. How can I achieve this?

这里，如果下拉列表中填充的数据是实例的C1 C2和C3。刷新页面后，只在下拉列表中填充C3。我希望刷新后填充所有值，即C1，C2，C3。我怎样才能做到这一点？

2 个解决方案

#1

As David said you are overwriting the item in localStorage. The key which you name should always be unique. The value of the key is changing at every iteration but not the key name. Hence to store it you will need to use a key with different names at each iteration. Instead of using

正如David所说，你正在覆盖localStorage中的项目。您命名的密钥应始终是唯一的。密钥的值在每次迭代时都会更改，但不会更改密钥名称。因此，要存储它，您需要在每次迭代时使用具有不同名称的键。而不是使用

localStorage.setItem("test",test);

use

使用

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

This will definitely not overwrite. And while retrieving use this in your 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);

    }
  }
}

This will append all the values in your drop-down list which was previously populated.

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

#2

You are overwriting the item in the localstorage with every iteration because the key is always 'test'.

您在每次迭代时都会覆盖localstorage中的项目，因为该键始终为“test”。

You could change the key to:

您可以将密钥更改为：

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

This would make them unique and all the values would be stored. You might want to change the key to something a little more descriptive.

这将使它们成为唯一的并且将存储所有值。您可能希望将密钥更改为更具描述性的内容。

Or you just store the response from your ajax call then create a function that forms the drop down lists, that can be called both in the ajax success and in your display function.

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

#1

localStorage.setItem("test",test);

use

使用

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