Question

我有一个窗口，其中包含下拉列表和一个HTML表格，其中根据下拉列表中的选择填充表格行。填充表后，用户单击每行进行选择，然后单击“确定”按钮。用户还可以根据需要仅选择三行中的两行。单击“确定”按钮后，我使用以下代码存储在localStorage中选择的行，并按如下方式执行某些操作：

 $('.ok').bind('click', function() {
    if (somecondition) {
        //some process
    }
    $("#selectedTblDiv tr:selected").each(function(index,row) {
        fnMatch($(row).find(("td:first").html()));
        localStorage.setItem("test-" + index, $(row).find(("td:first").html()));
    });
    fnDialogClose();
});

这里我将localStorage中每行的第一个元素与唯一ID存储在一起。当我在页面刷新时检索相同内容时，我执行以下过程：

function fnDisplay() {
    //some code to open dialog   
    for (var i = 0; i < localStorage.length; i++) {
        //some code and process
        var $select = $("#list_button");
        for (var j = 0; j < localStorage.length; j++) {
            if (localStorage.getItem("test-" + j)){
                var t = localStorage.getItem("test-" + j);
                if (t == prevIDs) {
                    $("#list_button > option").each(function() {
                        if (this.text == prevIDs) {
                            $(this).remove();
                        }
                    });
                    $('<option>').text(prevIDs).attr("disabled", true).appendTo($select);
                }
            }
        }
    }
}

这里基本上fnDisplay（）打开一个窗口，并在一些进程下拉列表中填充。从列表中用户选择并在HTML表格中填充详细信息。单击“确定”，它执行一些操作，并将用户选择的表存储在localStorage中。

再次当用户打开窗口时，下拉列表中的项目将被禁用，这些项目之前已从表格中选择。但是，未从下拉菜单中选择的项目仍可供选择。

我的问题如下：

下拉列表

10023
10024
10025

用户选择10023和10024，因此HTML表格填充如下：

HTML表格

vehID    Name    Place     Summary 
-----    ----    -----     -------
10023    car     blore    4-wheeler
10024    bike    pune     2 wheeler

现在用户选择行10023和10024并按clcik“确定”。现在窗口关闭并重新打开，所以我的下拉看起来如下

10023   //disabled
10024   //disabled
10025   //enabled

我的html表是空的。

现在，用户可以选择未选择的值。即10025 现在选择10025并填充HTML并单击相同的行选择和“确定”按钮。现在，当用户重新加载窗口时，我希望下拉列表中的所有选项都被禁用，因为所有选项都被选中。但是，由于localStorage基于行选择，因此在选择新值时会覆盖存储的值。虽然我已经为每一行提供了唯一的ID

localStorage.setItem("test-"+index,somethin);

选择新行时，index的值再次设置为0。所以我的下拉列表看起来像这样

10023  //enabled
10024  //disabled
10025   //disabled

所以这里10025会覆盖10023.如何通过为每个人提供唯一ID来解决此问题？

Answer 1

问题是您要单独保存每个选定的项目，导致在添加新项目时覆盖现有项目。

相反，您可以在localStorage中存储一系列项目。当您添加新项目时，您可以检索该数组并将新项目推入其中。以下内容：

var items = JSON.parse(localStorage.getItem("items")) || [];
$("#selectedTblDiv tr:selected").each(function (index, row) {
  items.push($(row).find(("td:first").html()));
});
localStorage.setItem("items", JSON.stringify(items));

为表中选定行设置唯一ID以存储在localStorage中

1 个答案: