천진난만 코딩 스토리

12. To Do List (Saving ToDos) 본문

노마드코더/바닐라 JS로 크롬 앱 만들기

12. To Do List (Saving ToDos)

Wisdom_1104 2023. 1. 15. 01:48

- HTML -

변경사항 없음

 

 

- JS -

const toDos = []; 를 하여

toDos라는 변수를 배열로 저장함.
function saveToDos() { 를 하여

saveToDos()라는 함수를 만듬.
localStorage.setItem("todos", JSON.stringify(toDos)); 를 하여

localStorage에 todos라는 Key와 toDos를 배열로 받아 Value에 저장함.

JSON.stringify(toDos)를 하여

toDos를 string으로 변경해줌.

변경하지 않으면 string 형태로 배열되어 저장되는 것이 아니라

단순 text 형태로 저장되기에 중복되어 저장되지 않음.

}

toDos.push(newTodo); 를 하여

toDos인 배열에 에 newTodo인 작성되는 to do를 추가함.
paintToDo(newTodo); 를 하여

paintToDo(newTodo) 함수를 실행함.
saveToDos(); 를 하여

saveToDos() 함수를 실행함.

 

 

 

- 화면 -

 

localStorage에 todos라는 Key와

toDos를 배열로 받아 Value에 저장된 것을 볼 수 있음.