"localStorage 無法正常工作\/localStorage 覆蓋自身"

Question

我正在嘗試創建一個簡單的待辦事項列表，但遇到了兩個問題：

刷新頁面后，所有創建的元素在頁面上不再可見，盡管在本地存儲中。
刷新頁面並向輸入提交新值后， localStorage會覆蓋自身。 盡管如此，輸入字段中顯示的項目來自以前的localStorage ，它不再存在（我真的希望這是有道理的）。

const inputEl = document.getElementById("inputEl")
const submitBtn = document.getElementById("submit")
const clearBtn = document.getElementById("clearBtn")
const todoListContainer = document.getElementById("todoList")
const taskContainer = document.querySelector(".task")
const cancelBtn = document.querySelector(".cancelBtn")
const doneBtn = document.querySelector(".doneBtn")
const errorMsg = document.querySelector(".error")

let localStorageContent = localStorage.getItem("tasks")
let tasksItem = JSON.parse(localStorageContent)
let tasks = []

function createTask() {
    if (inputEl.value.length != 0) {


        const newDiv = document.createElement("div")
        newDiv.classList.add("task")
        const newParagraph = document.createElement("p")
        const newCancelBtn = document.createElement("button")
        newCancelBtn.classList.add("cancelBtn")
        newCancelBtn.textContent = "X"
        const newDoneBtn = document.createElement("button")
        newDoneBtn.classList.add("doneBtn")
        newDoneBtn.textContent = "Done"

        todoListContainer.appendChild(newDiv)
        newDiv.appendChild(newParagraph)
        newDiv.appendChild(newCancelBtn)
        newDiv.appendChild(newDoneBtn)
        //^^ Creating a container for a new task, with all its elements and assigning the classes^^



        tasks.push(inputEl.value)
        inputEl.value = ""

        for (let i = 0; i < tasks.length; i++) {
            localStorage.setItem("tasks", JSON.stringify(tasks))
            newParagraph.textContent = JSON.parse(localStorageContent)[i]
        }

        errorMsg.textContent = ""

    } else {
        errorMsg.textContent = "You have to type something in!"
        errorMsg.classList.toggle("visibility")

    }

}

submitBtn.addEventListener("click", () => {
    createTask()
})

clearBtn.addEventListener("click", () => {
    localStorage.clear()
})

HTML 代碼如下：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js" defer></script>
      <title>To-do list</title>
   </head>
   <body>
      <h2 class="error visibility"></h2>
      <div id="todoList">
         <h1>To-Do List</h1>
         <input type="text" name="" id="inputEl" placeholder="Add an item!">
         <button type="submitBtn" id="submit">Submit</button>
         <button id="clearBtn">Clear list</button>
         <div class="task">
         </div>
      </div>
   </body>
</html>

Answer 1

刷新頁面后，所有創建的元素在頁面上不再可見，盡管在本地存儲中
<\/blockquote>

那是因為您僅在單擊事件之后而不是在頁面加載<\/a>時才呈現 HTML。 要為存儲在localStorage<\/code>中的現有任務渲染 HTML，您必須編寫一個代碼，循環遍歷tasksItem<\/code>中的現有任務並將渲染邏輯應用於它。

我建議從您的createTask()<\/code>函數中拆分渲染代碼並為其創建一個新函數（例如renderTask()<\/code> ），然后您可以在頁面加載的循環中使用它，並在創建新任務后調用該函數在createTask()<\/code>函數中。
        
         刷新頁面並向輸入提交新值后，localStorage 會覆蓋自身。
<\/blockquote>
 那是因為您實際上覆蓋了localStorage<\/code>中的任務。 要保留現有任務，您必須使用您的tasksItem<\/code>變量而不是空白tasks<\/code>數組來創建您的任務並將它們保存到localStorage<\/code> 。
          
         所以，而不是：
          
         你會使用：
這同樣適用於：
 
        

"localStorage 無法正常工作\/localStorage 覆蓋自身"

問題描述

1 個解決方案

解決方案1
3 已采納 2022-02-06 19:40:28

"localStorage 無法正常工作\/localStorage 覆蓋自身"

問題描述

1 個解決方案

解決方案1 3 已采納 2022-02-06 19:40:28

解決方案1
3 已采納 2022-02-06 19:40:28