如何向本地存储添加更多项目？

Question

我刚开始编程，我正在玩这个待办事项清单。现在我想将我的待办事项添加到本地存储。

但是每次我在列表中添加一个新项目时，我都会覆盖一个项目并且只执行项目。

我该如何解决这个问题？

这是代码：

$(document).ready(function() {
  var data = JSON.parse(localStorage.getItem("todoData"));

  for (var i = 0; i < localStorage.length; i++) {
    $('#thingsTodo').append('<div class="section">' +
      '<li id="listItem" class="blue-text text-darken-2 tooltip">' + data + '<span class="tooltiptext">Click to edit</span></li>' +
      '<i class="small material-icons deleteThisItem">delete</i>' +
      '<div class="divider"></div>');
  }

  $('#addItem').on('click', addItemToList);
  $('#thingsTodo').on('click', '.deleteThisItem', deleteItem);
  $('#thingsTodo').on('click', '#listItem', editItem);

  function addItemToList() {
    var newItem = {
      value: $('#inputField').val()
    };

    if (newItem.value !== '') {

      localStorage.setItem("todoData", JSON.stringify(newItem.value));

      $('#thingsTodo').append('<div class="section">' +
        '<li id="listItem" class="blue-text text-darken-2 tooltip">' + newItem.value + '<span class="tooltiptext">Click to edit</span></li>' +
        '<i class="small material-icons deleteThisItem">delete</i>' +
        '<div class="divider"></div>');
      $('#inputField').val("");
    } else {
      alert("Please make sure you enter something before clicking the button");
    }
  }

  function deleteItem() {
    $(this).closest('.section').remove();
    $(this).closest('.divider').remove();
  }

  function editItem() {
    var newTodoInput = {
      newValue: prompt("Please edit your todo item")
    };


    if (typeof newTodoInput.newValue !== 'object') {
      if (newTodoInput.newValue !== "") {

        $(this).replaceWith('<li id="listItem" class="blue-text text-darken-2 tooltip">' + newTodoInput.newValue + '<span class="tooltiptext">Click to edit</span></li>');
      }

    } else {
      alert("Please make sure you enter something before clicking the button");
    }


  }

});

如果可能的话，请在编辑列表项时告诉我如何保存它。

Answer 1

当您创建一个新的待办事项时，您可以将该项目推送到全局数组，然后将该数组添加到本地存储中。

 var items = [];


 function addItemToList (){
  var input = $('#inputField').val() 
  items.push(input);

  if(input){
    localStorage.setItem("todoData", JSON.stringify(items));

            $('#thingsTodo').append('<div class="section">'+
             '<li id="listItem" class="blue-text text-darken-2 tooltip">'   + item + '<span class="tooltiptext">Click to edit</span></li>'+
                        '<i class="small material-icons deleteThisItem">delete</i>'+
                        '<div class="divider"></div>');

    $('#inputField').val("");
    }else{
      alert("Please make sure you enter something before clicking the button");
 }
}

使用localStorage.setObj（key，value）来保存数组或对象，并使用localStorage.getObj（key）来检索它，就像这样

 $(document).ready(function() {
 var storedItems = JSON.parse(localStorage.getItem("toDoData"));

        for(var i = 0; i < storedItems.length; i++) {
                       $('#thingsTodo').append('<div class="section">'+
         '<li id="listItem" class="blue-text text-darken-2 tooltip">'   + storedItems[i] + '<span class="tooltiptext">Click to edit</span></li>'+
                    '<i class="small material-icons deleteThisItem">delete</i>'+
                    '<div class="divider"></div>');
        }
      });

Answer 2

在youraddItemToList函数中，你总是使用all问题的相同键。它覆盖现有的正常行为。您必须将待办事项存储在同一个键下的数组中，或者每个项目具有不同的键。

数组的简化代码。

var initialTodos = [];
localStorage.setItem('todoData', JSON.stringify(initialTodos );

// add item
function addItem(item) {
  var todos = getTodos();
  todos.push(item);
  localStorage.setItem('todoData', JSON.stringify(todos));
}
 // remove get data
function getTodos() {
   return JSON.parse(localStorage.getItem('todoData'));
}
// remove item
function removeItem(item) {
   var todos = getTodos();
   var index = todosFromStorage.indexOf(item);
   if (index >= 0) {
       todos.splice(index, 1);
       localStorage.setItem('todoData', JSON.stringify(todos));
   }
}

如果要使用不同的值。为每个项添加唯一的id字段，并将其用于密钥。

localStorage.setItem("todoData" + Date.now(), JSON.stringify(newItem.value));

注意：不要在localStorage字段上使用iterate，因为您可能还存储其他类型的数据。