本地存储未正确更新？

Question

我正在创建待办事项列表应用程序，但是我在本地存储上遇到了麻烦。 待办事项可以“完成”和“删除”。因此，completeToDo和删除todo函数。

我的问题是，如果我创建一个待办事项“完成”并刷新它恢复为未完成的页面。如果我再次做同样的事情，它终于可以工作了。我似乎无法在代码中找到问题，我通过此行更新本地存储空间

localStorage.setItem("TODO", JSON.stringify(LIST));

代码：

// Selecting elements
const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");
const plus = document.querySelector(".add-to-do");


// Classes names in css
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";

// Variables
let LIST, id;

// get item from local storage

let data = localStorage.getItem("TODO");

if(data) {
    LIST = JSON.parse(data);
    id = LIST.length; // set the id to the last one in the list
    loadList(LIST); // load the list to the user interface
} else{
    // if data isnt empty
    LIST = [];
    id = 0;

}

// load items to the ui

function loadList(array){
    // loop over array
    array.forEach(function(item) {
        addToDo(item.name, item.id, item.done, item.trash);

    });
}

clear.addEventListener('click', function() {
    localStorage.clear();
    location.reload();

});


// Show todays date
const options = {weekday : "long", month:"short", day:"numeric"};
const today = new Date();
dateElement.innerHTML = today.toLocaleDateString("en-UK", options);

function addToDo(toDo, id, done, trash) {

    if(trash){ return; }
    const DONE = done ? CHECK : UNCHECK;
    const LINE = done ? LINE_THROUGH: "";

    // Adding html element to UI
    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>`;

    // Adds todo to the end of the list
    const position = "beforeend";
    list.insertAdjacentHTML(position, item);


}

// add an item
document.addEventListener("keyup", function(even) {
    if(event.keyCode == 13){
        const toDo = input.value;

        if(toDo){
            addToDo(toDo);

            LIST.push({
                name: toDo,
                id: id,
                done : false,
                trash: false
            });

            // add item to local storage
            localStorage.setItem("TODO", JSON.stringify(LIST));
            id++;

        }
        input.value = "";
    }
});



// Complete todo

function completeToDo(element) { 

    // Updating ui
    element.classList.toggle(CHECK); // If the check is in the class list remove it or if it isnt add it to the classlist
    element.classList.toggle(UNCHECK);
    element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);

    // Updating list

    /*
    Access the propety 'done' from the element with the selected id
    If its false change it to true if its true change it to false


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

}

function removeToDo(element) {
    // Remove from UI
    element.parentNode.parentNode.removeChild(element.parentNode);
    LIST[element.id].trash = true;


}





/*

-----------------------------HERE------------------------

*/


list.addEventListener('click', function(event) {
    const element = event.target; // return the clicked element inside the list
    const elementJob = element.attributes.job.value; // return complete or delete

    if (elementJob == "complete") {
        completeToDo(element); // if the user clicks the complete button it calls the complete function
    } else if (elementJob == "delete") {
        removeToDo(element); // if the user clicks the trash icon it removes it
    }

    // Local storage is updated here
    localStorage.setItem("TODO", JSON.stringify(LIST));

});

因此，当这两个事件之一发生时，我会更新本地存储

TLDR 如果我创建了一个待办事项，请完成它，然后单击刷新，它会恢复为未完成状态，它需要尝试单击完成以保存适当的内容