我正在尝试创建一个简单的待办事项列表，但遇到了两个问题：
- 刷新页面后，尽管所有创建的元素都在本地存储中，但页面上不再可见。
- 刷新页面并向输入提交新值后，
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>
刷新
页面后，尽管所有创建的元素都在本地存储中，但页面上不再可见
这是因为您仅在单击事件之后呈现 HTML，而不是在页面加载时呈现。若要呈现存储在localStorage中的现有任务的 HTML，您必须编写一个代码，该代码循环访问tasksItem中的现有任务并对其应用呈现逻辑。
我建议将渲染代码与createTask()函数分开并为其创建一个新函数(例如renderTask())，然后您可以在页面加载的循环中使用它，并在createTask()函数中创建新任务后调用该函数。
window.addEventListener('load', (event) => {
// Your read, loop and render logic goes here
})
刷新页面并向输入提交新值后，localStorage 会覆盖自身。
那是因为您实际上是在覆盖localStorage中的任务。要保留现有任务，您必须使用tasksItem变量而不是空白tasks数组来创建任务并将它们保存到localStorage。
因此，而不是：
tasks.push(inputEl.value)
您将使用：
tasksItem.push(inputEl.value)
这同样适用于：
for (let i = 0; i < tasksItem.length; i++) {
localStorage.setItem("tasks", JSON.stringify(tasksItem))
// …
}