바닐라 JS로 크롬 앱 만들기 [6-5] Loading To Dos

---

JSON.parse : Array로 변경해주는 기능

localStorage에 저장된 리스트를 배열로 변경

콘솔

JSON.parse(localStorage.getItem("todos"))
< (4) ['a', 'b', 'c', 'd']

---

// Loading todos

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    
} // savedToDos -> null이 아니라면  array로 변경됨

배열로 바꾼 리스트의 각 항목에 function을 실행하기

forEach 사용

function sayHello() {
    console.log("hello");
}

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello); // 각각의 아이템에 대해 sayHello 실행

}

• 콘솔에 배열의 수 만큼 sayHello 실행
• 문제점 : 어떤 item을 사용하고 있는지 모름

item 사용

function sayHello(item) {
    console.log("this is the turn of", item);
}

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello);

}

item 각 항목을 알아볼 수 있게 해줌

위 방법을 더 간단하게 하는 방법

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of", item));

}

=> → arrow function(화살표 함수)

---

forEach를 활용해서 투두리스트를 새로고침해도 페이지에 출력

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos); // 2. string으로 변환된 것을 JS에서 사용 가능한 배열로 변환
    parsedToDos.forEach(paintToDo);

}

• 이미 만들어뒀던 paintToDo 를 실행하게 함
• 문제점 : 새로고침 후 새로 저장한 것들만 localStorage에 저장되고 이전 것은 사라짐
• 원인 : app이 시작될 때 toDos array는 항상 비어있기때문에

문제점

const toDos = [];

→ app이 시작될 때 toDos array는 항상 비어있다
→ 이전에 입력한 todo는 포함하지 않음

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

→ submit 될 때마다 빈 array에 push

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

→ 새로운 투두만 포함된 array를 저장

해결

앱이 시작될 때 빈 값으로 시작하는 대신 const를 let으로 바꿔서 업데이트 가능하게 만듬

 let toDos = [];

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

}

• toDos = parsedTodos → 웹 시작 시 리스트가 있었다면 toDos에 채움
• 문제점 : 리스트를 삭제해도 localStorage에 그대로 있음