我正在尝试改进我的第一个项目的代码,to do list
我想要做的是将项目保存在 中localStorage
,这样当我刷新浏览器时,它们不会被删除或重新启动,但最重要的是,检查的项目或当删除刷新页面时不再出现的项目。在每个项目中,我有三个按钮:
- 完成或检查项目的按钮:
checkButton
- 用于编辑任务的按钮:
editButton
- 删除任务的按钮:
trashButton
我将数据存储在一个对象列表中,该列表包含一个único id
,nombre del item
(我存储输入的值)和检查存储在其中的项目的按钮的值completed
(它是什么checkButton.value
,值可以帮助我知道是否该项目已完成或检查)。
正如我之前提到的,问题是如果项目保存在localStorage
其中,而不是我在其中所做的更改。例如,假设我在页面上放置了一个项目,它保存在 localStorage 中,但想象一下稍后我编辑它的任务、删除它或将其标记为已完成,但是当我刷新页面时,我所做的那些更改并没有保存。
每次我想编辑值时,我都尝试从localStorage中删除数据并重新上传,但没有成功。
请向我解释发生了什么,如果您告诉我我的代码是否一目了然,是否被理解,或者是否是干净的代码,我将不胜感激
"use strict"
//date function
const dateElement= document.getElementById("date");
const options= {
weekday:"long",
month:"short",
day:"numeric"
}
const today= new Date();
dateElement.innerHTML= today.toLocaleDateString("en-US",options);
const list= document.getElementById("list");
const input= document.getElementById("input");
const normalButton= document.getElementById("normal");
const finishedTask= document.getElementById("done");
const unfinishedTask= document.getElementById("not-done");
const refreshBtn = document.getElementById("refresh-btn");
const failBox = document.getElementById("fail");
const closeBtn = document.getElementById("close-btn");
document.addEventListener("keyup",(event)=>{ if(event.keyCode === 13) addToDo() });
let lists = [];
// Obtener desde localStorage al cargar todo el DOM
window.addEventListener('load', function() {
lists = JSON.parse(localStorage.getItem("item.list")) || [];
// Agregar en HTML los elementos encontrados
lists.forEach((item) => addToDo(item));
});
function addToDo(fromList){
refreshBtn.addEventListener("click",() => refreshPage());
event.preventDefault();
let itemValue= (fromList) ? fromList.name : input.value;
function failAlert(){
failBox.style.display = "block";
closeBtn.addEventListener("click", ()=> failBox.style.display = "none")
}
if(itemValue === "" || itemValue === null) return failAlert();
const itemNew= document.createElement("li");
const deleteButton= document.createElement("button");
const para = document.createElement("p");
const editButton= document.createElement("button");
const checkButton= document.createElement("button");
const buttonsContainer= document.createElement("div");
itemNew.appendChild(buttonsContainer);
buttonsContainer.classList.add("buttons");
//creating text
para.classList.add("text");
const text= document.createTextNode(itemValue);
para.appendChild(text);
//item
itemNew.classList.add("item");
itemNew.appendChild(checkButton);
itemNew.appendChild(para);
list.appendChild(itemNew);
//check-buttton
checkButton.classList.add("checkbox");
checkButton.innerHTML = `<i class="far fa-circle fa-lg"></i>`
checkButton.value= "not-checked";
//edit-button
editButton.classList.add("edit");
editButton.innerHTML = `<i class="far fa-edit"></i>`
buttonsContainer.appendChild(editButton);
//delete-button
deleteButton.classList.add("delete");
deleteButton.innerHTML = `<i class="fas fa-trash-alt"></i>`
buttonsContainer.appendChild(deleteButton);
//ACA ES DONDE CHEQUELO LOS ITEMS
checkButton.addEventListener("click",() =>{
//SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
checkButton.value ==="not-checked" ? completedTask(): incompletedTask();
function completedTask() {
checkButton.setAttribute("value","checked");
checkButton.innerHTML = `<i class="far fa-check-circle fa-lg"></i>`
}
function incompletedTask() {
checkButton.setAttribute("value","not-checked");
checkButton.innerHTML = `<i class="far fa-circle fa-lg"></i>`
}
para.classList.toggle("completed");
});
//ACA YO ES DONDE EDITO LAS TAREAS
editButton.addEventListener("click",()=>{
para.innerHTML = `<div class=".edit-container" id = "edit-container"></div>`;
let editContainer = document.getElementById("edit-container")
let editInput = document.createElement("input");
let submitEdit = document.createElement("button");
editInput.classList.add("edit-input");
submitEdit.classList.add("submit-edit");
submitEdit.innerHTML = `<i class="fas fa-plus-circle fa-lg"></i>`
editContainer.appendChild(editInput);
editContainer.appendChild(submitEdit);
submitEdit.addEventListener("click",() => para.innerHTML = editInput.value);
}
);
//ACA ELIMINO LA TAREA
deleteButton.addEventListener("click", ()=>{
list.removeChild(itemNew);
} );
//normal button
normalButton.addEventListener("click", ()=> itemNew.setAttribute("style","display:block") );
//finished-task button
finishedTask.addEventListener("click",()=>{
checkButton.value==="checked" ? itemNew.setAttribute("style","display:block")
:itemNew.setAttribute("style","display:none");
});
//unfinished-task button
unfinishedTask.addEventListener("click",()=>{
checkButton.value==="not-checked" ? itemNew.setAttribute("style","display:block")
:itemNew.setAttribute("style","display:none");
});
let data = createDataList(itemValue, checkButton.value);
if(!fromList) {
lists.push(data);
save();
}
function save(){
localStorage.setItem("item.list", JSON.stringify(lists));
}
function createDataList(name, completed){
return {id: Date.now(), name: name, completed: completed};
}
input.value = "";
}
function refreshPage(){
localStorage.clear();
location.reload();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/09faf5376a.js" crossorigin="anonymous"></script>
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="header">
<i class="fas fa-sync-alt" id="refresh-btn"></i>
<div class="title-container">
<h1 class="title">To Do List App</h1>
<h2 class="ferre">By Fxrree</h2>
</div>
<div class="date" id="date"></div>
<div class="functionalities">
<button id="normal" class="normal">NORMAL</button>
<button id="done" class="done">DONE</button>
<button id="not-done" class="not-done">NOT-DONE</button>
</div>
</div>
<div class="fail" id="fail">
<i class="fas fa-times-circle" style="color: #fff;" id="close-btn"></i>
<p class="failed-text">Please type a valid to do</p>
</div>
<div class="content">
<ul id="list" class="list"></ul>
</div>
<div class="add-item">
<input type="text" class="input" id="input" placeholder="Add something to do">
<i class="fas fa-plus-circle fa-lg" id="button" onclick="addToDo()"></i>
</div>
</div>
<script src="app.js/app.js"></script>
</body>
</html>
您还必须在每个相应项目的编辑和检查按钮的每个事件中修改 localStorage 数据。例如在这一行:
在那里,您只在元素中显示新值,而不是修改 localStorage 数据。您应该在那里检测与您正在修改的 DOM 项目相对应的 localStorage 中的哪个项目,然后使用已编辑的项目生成一个新数组,然后将其保存在 localStorage 中。但是,正如您的代码一样,您将不得不进行一些修改。最快的方法是在“li.item”中添加一个“data-id”,其值为您的 localStorage 中项目的 id(即您使用的“new Date()”)。因此,在事件处理程序中,您可以执行以下操作:
这个想法本身会奏效。请记住,您还应该对选中的按钮执行类似的操作。
除此之外,我建议以下几点:
这样,每个版本将使用更少的流程。
...这种模式您可以使用其他功能。请记住,保持顺序和可读性比超级抽象和紧凑的代码更好。
快乐的代码!