[JS] todo 리스트를 만드는 중 localstorage Value에서 모든 값이 사라지지 않고 마지막에 항상 하나의 값이 남아있게 되는데 코드의 어느 부분이 잘못되었을까요?

Question

제가 todolist를 만들고 있는데요, ✅(완료) 버튼을 누르면 해당 todo에 text-decoration: line-through; 라는 css가 toggle될 수 있게 만들었습니다. css를 새로고침 후에도 유지시키기 위해서 localstorage에 key를 completed라고 하여 text-decoration: line-through;가 적용된 todo 내용을 저장하였습니다. 그런데 대부분은 정상적으로 잘 작동하는데 ✅버튼을 다시 눌러 위 스타일을 없앨 경우 localstorage Value에 마지막 하나 요소(todo)가 남았을 때 그 요소의 스타일을 없앴음에도 localstorage Value에서 사라지지 않고 계속 남아있습니다.예를 들어서 b, d, e 옆의 ✅버튼을 눌러다음과 같은 상태를 만들었다고 할 때,이것들의 경우 localstorage에 정상적으로 반영이 됩니다.다시 ✅를 눌러 line-through 스타일을 모두 없애보면다음과 같이 b와 d는 Value에서 정상적으로 삭제되었는데 마지막으로 스타일을 없앤 e라는 내용의 todo가 남아있습니다.위와 같이 마지막으로 line-through 스타일을 없앤 todo가 Value에 남게 되는데 이것을 없애기 위해서는 어떻게 해야 할까요?좀 길지만 관련된 코드는 모두 첨부하였습니다.[HTML] 오늘의 할 일

오늘의 할 일

[CSS].completed { text-decoration: line-through; color: gray; }[JS]const form = document.querySelector("form"); const ul = document.querySelector("ul"); function getLocal() { let todos; if (localStorage.getItem('todos') === null) { todos = []; } else { todos = JSON.parse(localStorage.getItem("todos")); // 스토리지에서 todos 값을 가져옴. } todos.forEach(function(todo) { // todo 요소마다 반복하기기 const createLi = document.createElement("li"); const li = ul.appendChild(createLi); const createP = document.createElement("p"); const createCompleteButton = document.createElement("button"); const createRemoveButton = document.createElement("button"); const p = li.appendChild(createP); const completeButton = li.appendChild(createCompleteButton); const removeButton = li.appendChild(createRemoveButton); p.innerText = todo; completeButton.innerText = "✅"; removeButton.innerText = "❌"; completeButton.className = "complete_button"; removeButton.className = "remove_button"; const toDoInput = document.querySelector("input"); toDoInput.value = ""; }); let completed; // 새로고침 이후에도 css(line-through) 유지를 위한 작업 if (localStorage.getItem("completed") === null) { completed = []; } else { completed = JSON.parse(localStorage.getItem("completed")); } const p = document.querySelectorAll("p"); completed.forEach(function(completedtodo){ for (let index = 0; index < p.length; index++) { // for (변수 정의; 조건; 증감식) 이 순서인 것을 기억하기!! if (p[index].innerText === completedtodo) { p[index].classList.add("completed"); } } }) } function removeLocal(todo) { // 여기에 인자로 들어가는 todo는

묶음이다. let todos; if (localStorage.getItem("todos") === null) { todos = []; } else { todos = JSON.parse(localStorage.getItem("todos")); } const todoIndex = todos.indexOf(todo.children[0].innerText); // 삭제할 할 일의 idndex (todos 리스트에서 todo(

묶음) text가 몇 번째 index인지를 알아야 한다.) todos.splice(todoIndex, 1); // index 번째 요소를 삭제 localStorage.setItem("todos", JSON.stringify(todos)); let completed; if (localStorage.getItem("completed") === null) { completed = []; } else { completed = JSON.parse(localStorage.getItem("completed")); } const completedIndex = completed.indexOf(todo.children[0].innerText); completed.splice(completedIndex, 1); localStorage.setItem("completed", JSON.stringify(completed)); } function manageToDo(event) { const whichButton = event.target.classList[0]; // 클릭한 부분의 클래스명을 가져옴. if (whichButton === 'complete_button') { // 클릭한 것의 class가 complete_button이면 (완료 버튼을 클릭하면) const toDoContainer = event.target.parentElement; // button의 부모 태그인 li를 정의 toDoContainer.children[0].classList.toggle("completed"); // li의 자식 요소 중 첫번째(p)에 .completed 스타일을 토글함. const todosText = document.querySelectorAll("p"); // line-through 스타일이 적용된 것들을 localStorage에 저장함. (새로고침 이후에도 css 유지를 위한 작업) let completed = []; todosText.forEach(function (todoText) { if (todoText.classList[0] === "completed") { completed.push(todoText.innerText); localStorage.setItem("completed", JSON.stringify(completed)); } }); } else if(whichButton === "remove_button") { // 클릭한 부분의 class가 delete_button이면 (삭제 버튼을 클릭하면) const toDoContainer = event.target.parentElement; removeLocal(toDoContainer); // 화면에서도 지우고 localstorage에서도 삭제함. (removeLocal 함수의 인자로 toDoContainer를 넣음으로써) toDoContainer.remove(); } } document.addEventListener("DOMContentLoaded", getLocal); ul.addEventListener("click", manageToDo);

[JS] todo 리스트를 만드는 중 localstorage Value에서 모든 값이 사라지지 않고 마지막에 항상 하나의 값이 남아있게 되는데 코드의 어느 부분이 잘못되었을까요?

0개의 답변

Q&A 목록