0

Web ページに li 要素を追加するアプリケーションがあります。Webページで「完了」とマークするときに、ローカルストレージ内で要素のクラス名を「完了」に変更する必要があります。(done: true と表示されます)。現在のコードでは、意図せずローカル ストレージに 2 つの項目を作成しています。ここに私のコードを示します：

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 でラベル付けされているため、各アイテムを追跡していますが、そのうちの 2 つがあります。また、ページを更新すると、2 つのリスト項目が表示されます。1 つは完了とマークされています。私の質問は、別のアイテムが作成されるのを防ぎ、代わりに1つのアイテムだけをlocalStorageで完了としてマークするにはどうすればよいですか?

4

1 に答える 1

0

各アイテムを一意に識別する方法が必要です。これにより、たとえば、同じキーを持つ2つのアイテムがある可能性があるため、意図したアイテムにマークが設定され、上書きされないようにすることができます。リストをループしているので、キーを2つの部分で構成されるように変更できるかもしれません。

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 に答える