Todo List專案–使用localStorage儲存待辦事項

今天我的目標是讓待辦事項在頁面重新載入後依然存在，這可以通過 localStorage 來實現。localStorage 是一個可以儲存在瀏覽器中的資料儲存機制，允許保存待辦事項的狀態，即使使用者關閉或重新載入頁面，資料也不會丟失。

首先，需要在每次新增或刪除待辦事項後，更新儲存在 localStorage 中的資料。可以將待辦事項保存為一個陣列，並在每次更新時將它存入localStorage：

function updateStorage() {
    const items = [];
    document.querySelectorAll("#todo-list li").forEach(item => {
        items.push(item.firstChild.textContent);  // 儲存每一個待辦事項的文字
    });
    localStorage.setItem("todos", JSON.stringify(items));  // 將陣列轉成字串儲存
}

每次在新增或刪除待辦事項時，都會呼叫updateStorage，將當前待辦事項的狀態更新到localStorage中。

同時，當頁面加載時，需要從localStorage中讀取之前儲存的待辦事項，並將它們顯示出來：

window.addEventListener("load", function() {
    const savedTodos = JSON.parse(localStorage.getItem("todos")) || [];
    savedTodos.forEach(todo => addItem(todo));
});