Javascript 为要存储在localStorage中的表中的选定行设置唯一ID

我有一个有下拉列表的窗口和一个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);
                }
            }
        }
    }
}

用户选择10023和10024，以便按如下方式填充HTML表：

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

HTML表格

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

现在，用户选择行10023和10024，并点击“OK”。 现在窗口已关闭并重新打开，因此我的下拉列表如下所示

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

我的html表是空的

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

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

选择新行时，索引的值再次设置为0。我的下拉列表如下所示

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

---

所以这里10025在10023上被覆盖。如何通过为每个项提供唯一的ID来解决此问题？

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

相反，您可以将项目数组存储在

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

---

您的第一个JS代码块已断开（缺少

）

在

'之后。确定'

，还有一个

}）在结尾）并且非常混乱。请使用以使其更易于阅读。是的，所有这些都是打字错误。抱歉，更改已经完成。您是否知道您发布的代码中充满了语法错误？一个工作演示，如将有助于那些试图帮助你。我已经编辑。很难进行小提琴演示。所以只有我解释了我的整个问题。