javascript - 在待办事项列表上使用 localStorage
问题描述
这是我第一个没有看视频的项目,我被困在最后一个障碍!我想将所有内容保存到 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 = "×";
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();
解决方案
您可以首先添加一个函数来从 localstorage 加载 todo 数组:
function loadTodos() {
todosArray = JSON.parse(localStorage.getItem('todoList')) || [];
}
然后在代码开头的某处调用该函数。
然后在您的toDoList
函数中,在定义事件侦听器之前,将所有待办事项添加到 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 = "×";
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
}
}
推荐阅读
- r - 如何将数据从长格式重塑为宽格式以实现此输出?
- java - AWS Java SDK SQSlistener 端点问题
- c++ - 为什么将 std::lock 放在 std::lock_guard 之前
- ruby - 如何在 ruby 中根据 UUID 生成 UTID?
- sql-server - 使用多行从 vb.net 更新存储过程
- scala - 在 Spark 中优化分区数据
- python - [-2:] 和 [2:] 有什么区别?
- javascript - mongoDB 集合中的 Meteor 新字段在 js 文件中有效,但在 html 模板中无效
- algorithm - 在图中查找指定边
- typo3 - TYPO3 自己的扩展详细信息页面,带有表单和计数器