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

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

在addItemToList 函数中，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 字段使用迭代，因为您可能还会存储其他类型的数据。