javascript - 当我将某个项目更改为垃圾箱时，为什么我的本地存储不会更新？

Question

我只是想把我的代码放在这里，尽管我知道你不应该这样做。我的待办事项列表工作得很好，唯一不起作用的是当我点击删除按钮时，它会从用户界面中删除待办事项，但不会从本地存储中删除它。当我点击刷新时，已删除的项目又回来了。

//Select Elements
const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");

//Class names for to-do items
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";

//Variables
let LIST;
let id;

//get item from local strorage
let data = localStorage.getItem("Todo");

//check if data is not emplty
if(data){
  LIST = JSON.parse(data);
  id = LIST.length;// set the id to the last item in the list
  loadList(LIST); //load the list to the user interface
} else{
  LIST = [];
  id = 0;
};

// load items to user interface
function loadList(array){
  array.forEach(function(item){
    addToDo(item.name, item.id, item.false, item.delete);
  });
};

//clear the local storage
clear.addEventListener("click", function(){
  localStorage.clear();
  location.reload();
});


//add item to local strorage
//let variable = localStorage.setItem('key');
//localStorage.setItem("Todo", JSON.stringify(LIST));


//show todays date
let options = {weekday : 'long', month:'short', day:'numeric'};
let today = new Date();

dateElement.innerHTML = today.toLocaleDateString("en-US", options);

// create a function that will add the to-do to the list when entered
function addToDo(todo, id, done, trash){

      if(trash){return;};

      const DONE = done ? CHECK : UNCHECK;
      const LINE = done ? LINE_THROUGH : "";

      const item = `
                  <li class="item">
                      <i class="fa ${DONE} co" job="complete" id="${id}"></i>
                      <p class="text ${LINE}">${todo}</p>
                      <i class="fa fa-trash-o de" job="delete" id="${id}"></i>
                  </li>
                   `;

      const position = "beforeend";

      list.insertAdjacentHTML(position, item);
};

//make the input become a todo item when the enter key is pressed
document.addEventListener("keyup", function(event){
  if(event.keyCode == 13){
    const todo = input.value;


    if(todo){
      addToDo(todo, id, false, false);
      LIST.push({
            name : todo,
            id : id,
            done : false,
            trash : false,
          });
          localStorage.setItem("Todo", JSON.stringify(LIST));
          id++;
    }
    input.value = "";
  }
});

//make the todo item change to completed when the user clicks on it
function completeToDo(element){
    element.classList.toggle(CHECK);
    element.classList.toggle(UNCHECK);
    element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);

    LIST[element.id].done = LIST[element.id].done ? false : true;
};

//remove a todo from the LIST
function removeToDo(element){
  element.parentNode.parentNode.removeChild(element.parentNode);

  LIST[element.id].trash = true;
};

//target the created items
list.addEventListener("click", function(event){
  let element = event.target;// return clicked element inside the list
  const elementJOB = element.attributes.job.value;// complete or delete
  if(elementJOB == "complete"){
    completeToDo(element);
  } else if (elementJOB == "delete"){
    removeToDo(element);
  }
    localStorage.setItem("Todo", JSON.stringify(LIST));
});

Answer 1

在 removeToDo 中，您将 trash 设置为 true，但在加载列表时，您会查找名为 delete 的键>.

然后，在 addToDo 中检查第四个参数(trash)是否为真，但传递了 item.delete 的值> 这是未定义，所以它是假的。

您需要更改此 addToDo(item.name, item.id, item.false, item.delete); 中的 addToDo(item.name, item.id, item) .false, item.trash);