0

我有一个应用程序，我在其中向网页添加 li 元素。当我在网页上将元素标记为“完成”时，我需要在本地存储中将元素的类名更改为“完成”。（应该说完成：真的）。使用我当前的代码，我无意中在本地存储中制作了两项，一项已完成：true，另一项已完成：false。我将在这里展示我的代码：

function updateDone(e) {
  var spanClicked = e.target;
  var id = spanClicked.parentElement.id;
  var done = spanClicked.parentElement.className;
  spanClicked.innerHTML = " ✔ ";
  spanClicked.setAttribute("class", "done");
  var key = "todos" + id;

  for(var i = 0; i < todos.length; i++) {
    if(todos[i].id == id) {
      var mark = todos[i];
      mark.done = true;
      console.log(mark);
      spanClicked.setAttribute("class", "done");
      var newKey = JSON.stringify(mark);
      localStorage.setItem(key, newKey);

      if(mark.done == false) {
        spanClicked.setAttribute("class", "not done");
        spanClicked.innerHTML = "not done";
      }
    }
  }
}

它们都标有相同的 id，这是我跟踪每个项目的方式，但其中有两个。此外，当我刷新页面时，会显示两个列表项，其中一个标记为完成。我的问题是如何防止创建另一个项目，而是在 localStorage 中仅将一个项目标记为已完成？

4

1 回答 1

0

您需要一种唯一标识每个项目的方法，因此您可以确保您的标记设置在您想要的项目上并且不会覆盖，因为您可能有两个项目具有相同的键。由于您正在遍历 list，也许您可​​以将键更改为由两部分组成。

var parent_key = "todos" + parent_id;

然后，在循环中：

var store_key = parent_key + ":" + i; ... localStorage.set(store_key,newKey);

通过这种方式（只要顺序保持一致），您可以将多个列表元素从同一个父级中分离出来。

正如所评论的，jsFiddle 中的一个活生生的例子或其他东西将有助于更好地满足您的要求。

但是，如果此解决方案不充分，您可以尝试以下想法，在本地存储中有效地设置“表”。

var parent_key = "todos" + id;
var parent_table = {};
// for loop
    parent_table[i] = newKey;
// end of for loop
localStorage.set(parent_key,parent_table);

因此，您在本地存储中有一个表，可以为您提供更精细的粒度。

于 2013-03-09T00:51:29.913 回答