13. To Do List (Loading To Dos)

- HTML -

변경사항 없음.

 

 

- JS -

(분홍색 박스)

변수의 이름을 헷갈리지 않게 바꿔줌.

(연두색 박스)

const 를 업데이트가 가능한 변수인 let 으로 변경해줌.

그래야 새로고침해도 localStorage에 저장된 데이터를 불러와 업데이트 할 수 있음.

 

const savedToDos = localStorage.getItem(TODOS_KEY); 를 하여

savedToDos 라는 변수에 localStorage의 TODOS_KEY인 todos를 저장함.

if (savedToDos !== null) { 를 하여

만약 savedToDos가 null이 아니라면 (비어있지 않다면)
const parsedToDos = JSON.parse(savedToDos); 를 하여

parsedToDos 라는 변수에 savedToDos를 저장함.

JSON.parse(savedToDos) 를 하여

단순한 string이었던 savedToDos 을 실제 배열로 만듬.
toDos = parsedToDos; 를 하여

toDos에 parsedToDos를 저장함.

이렇게 하면 업데이트 가능한 toDos에

localStorage에 저장된 todos인parsedToDos를 업데이트하여

toDos에 parsedToDos가 저장됨.

parsedToDos.forEach(paintToDo); 를 하여

parsedToDos의 array에 있는 각각의 item에 대해 paintToDo함수를 실행함.
}

 

 

 

- 화면 -

새로고침을 해도 localStorage에 저장되어있던 todos를 불러와서

화면에서 사라지지않음.