7.5 Loading To Dos (2)

gangmin·2021년 12월 25일
0

강의

복습

JS는 함수를 호출하면서 array에 있는 각각의 item을 준다. sayHelllo( )를 6번 실행하는것이 아니다. sayHello("a")를 한 번 실행하고, 또 한번은 sayHello("b"),또 한번은 sayHello("c")... 계속 한번씩 하는거다. (??????????)
===> 함수를 한 번만 호출하고 각각의 item만을 바꿔준다는 말인듯?..?????


본론

로컬에 저장된 데이터를 불러와서 화면에 출력해줘야 한다.

parsedToDos.forEach(paintToDo);

로컬에서 불러온 string을 array로 변환하여 array에 들어있는 각각의 item을 paintToDo 함수를 통해 화면에 출력되게 한다.

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
if(savedToDos !== null){ //(savedToDos)
    const parsedToDos = JSON.parse(savedToDos);    
    parsedToDos.forEach(paintToDo);    <-----
} 

결론적으로 로컬에 저장된 값들이 화면에 출력된다. 즉, 새로고침을 해도 삭제 하지 않은거라면 남아있다.


근데 문제는 새로고침을 하고 다시 입력을 하면 덮어씌어지므로 그전에 있던 데이터가 사라진다....!!
우리는 덮어쓰는것을 선호하지않는다. 이전것과 새로운것으로 모두 유지하고 싶다.

이유

코드를 위에서 부터 잘보면 toDos =[ ]; <--- 얘가 항상 비어있기 때문이다. 우리는 저 array에 todo를 넣고 로컬에 저장한 다음, array에 있는 데이터를 불러와서 화면에 출력해준다. 그런데 한참 작성을 하고 새로고침을 하고 다시 입력하게 되면... 새로고침을 했기 때문에 toDos =[];에 들어있던 데이터들이 사라지게 된다. 즉, 그래서 새로고침 후 다시 입력을 하면 array에 있었던 데이터들이 다 사라져서 데이터가 덮어쓰여지는것 처럼 보이는 이유이다.

handleToDoSubmit 함수에 있는 saveToDos();가 실행되어 localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); toDos배열들이 로컬에 저장이 된다. 그런데, handleToDoSubmit 함수에는 toDos.push(newToDo); 이런 코드로 인해 새로고침을 하면 toDos 빈배열이 되므로 새로고침후 새로 입력한 것이 덮어 씌여지는것이다!!!! ( •̀ ω •́ )✧

해결 방법

old todo들은 없다!
= 우리가 갖고 있던 todos의 이전 복사본을 잊어비록 있다는 말이다. 이건 매우 쉽게 해결할 수 있다. const toDos =[]; 빈 배열이 아닌 const를 let으로 바꿔서 업데이트가 가능하도록 만들고, 로컬에 todo들이 있으면 배열 toDos에 parsedToDos(로컬에서 불러온 데이터)를 넣어서 전에 있던 todo들을 복원해줄거다!!

let toDos =[];   <-----

if(savedToDos !== null){ //(savedToDos)
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;      <-----
    parsedToDos.forEach(paintToDo);
} 

근데 또 문제는 화면상에서 삭제하도 로컬에서 삭제되는것이 아니라서 새로고침하면 삭제했던게 다시 나타난다. 이건 다음 강의에서 해결하자.

완료된 코드

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos"

let toDos =[];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

function deleteToDo(e){
    const li = e.target.parentElement;
    li.remove();
}

function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null){ //(savedToDos)
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
} 

0개의 댓글