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

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

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

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 行并单击“确定”。 现在窗口已关闭并重新打开，因此我的下拉列表如下所示

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

我的 html 表是空的。

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

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

当选择新行时，索引值再次设置为 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));