在待辦事項列表上使用 localStorage

Question

這是我第一個沒有看視頻的項目，我被困在最后一個障礙上。 我想將所有內容保存到 localStorage 並在頁面重新加載時檢索它。 我將所有內容都保存在 localStorage 中，但我正在努力檢索它並按原樣顯示：這是代碼：

    let todosArray = [];
const userInput = document.querySelector(".formInput");
const submitBtn = document.querySelector(".submitButton");
const completeBtn = document.createElement("input")


// get submit button and log char typed into input and append to Li.
function toDoList() {
  submitBtn.addEventListener("click", function() {
    const todoUl = document.querySelector(".toDoList");
    const todoLi = document.createElement("li");

    todosArray.push(userInput.value);
    if (localStorage !== null) {
      localStorage.setItem('todoList', JSON.stringify(todosArray))
    }

    window.addEventListener('DOMContentLoaded', (event) => {
      let storage = localStorage.getItem('todoList');
        if (storage) {
          todoLi = JSON.parse(storage);
        }
        console.log(event);
    });

    todoLi.setAttribute("listItems", userInput.value);
    todoLi.appendChild(document.createTextNode(userInput.value));
    todoUl.appendChild(todoLi);
    if (userInput.value.length < 1) return;
    userInput.value = "";

    //append deleteBtn
    const deleteBtn = document.createElement("button");

    deleteBtn.classList.add("deleteBtn");
    deleteBtn.innerHTML = "&times";
    todoLi.appendChild(deleteBtn);

    //apply deleteBtn
    deleteBtn.addEventListener("click", function() {
      todoUl.removeChild(todoLi);
    });

    //append completeBtn
    const completeBtn = document.createElement("input");

    completeBtn.classList.add("completeBtn");
    completeBtn.setAttribute("type", "checkbox");
    todoLi.appendChild(completeBtn);

    //apply completeBtn

    completeBtn.addEventListener("click", function() {
      completeBtn.classList.add('lineThrough');
      todoLi.classList.toggle('lineThrough');
    });

  });

};

toDoList();

Answer 1

您可以先添加一個 function 來從 localstorage 加載 todo 數組：

function loadTodos() {
    todosArray = JSON.parse(localStorage.getItem('todoList')) || [];
}

然后在代碼開頭的某處調用 function。

然后在您的toDoList function 中，在定義事件偵聽器之前，將所有待辦事項添加到 DOM：

function toDoList(){
    const todoUl = document.querySelector(".toDoList");
    for (var i = 0; i < todosArray.length; i++) {
        const newItem = document.createElement("li");
        newItem.textContent = todosArray[i];
        todoUl.appendChild(newItem);

        /********************************************************
        * This is the same code as you had in the event listener. 
        * Consider extracting it to a separate function to avoid
        * repeating yourself.
        ********************************************************/

        //append deleteBtn
        const deleteBtn = document.createElement("button");

        deleteBtn.classList.add("deleteBtn");
        deleteBtn.innerHTML = "&times";
        newItem.appendChild(deleteBtn);

        //apply deleteBtn
        deleteBtn.addEventListener("click", function() {
          todoUl.removeChild(newItem);
        });

        //append completeBtn
        const completeBtn = document.createElement("input");

        completeBtn.classList.add("completeBtn");
        completeBtn.setAttribute("type", "checkbox");
        newItem.appendChild(completeBtn);

        //apply completeBtn

        completeBtn.addEventListener("click", function() {
          completeBtn.classList.add("lineThrough");
          newItem.classList.toggle("lineThrough");
        });

        //...your eventListener code for submit button goes here
    }
}