7.3 Saving To Dos

강의

자 이제 실제로 todo들을 저장해보자! 새로고침하면 모든게 사라지기 때문이다.

브라우저에 저장하려면? ls(local storage)=로컬에 저장하면 된다.
입력한걸 ls에 저장하고, 새로고침하면 ls에 저장된걸 불러와서 화면에 그려주고 싶은거다.

---

순서

1 ) array를 만든다. 입력되는 todo 텍스트를 array에 넣을거다.
---> newToDo를 그리기 전에(paintToDo를 실행하기 전에=화면에 출력하기 전에), array를 가지고 와서 newToDo를 넣을거다.

2 ) 배열에 추가된 할일들을 로컬에 저장해주는거다! 하지만, 문제는 로컬에 배열을 저장할 수 없다는 거다. 로컬에는 오직 텍스트만 저장할 수 있다.

saveToDos( ) : 배열을 로컬에 집어넣는거다.

const toDos =[];  <-----

function saveToDos(){   <-----
    localStorage.setItem("todos",toDos)
}

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

이렇게 작성을 하고 로컬을 보면,

key	value
todos	밥,청소,공부,운동

이런식으로 저장이 된다.

새로고침을 하면 화면에는 보이지 않는다. 당연히 로컬에 저장은 해도 불러오지는 않았으니까 ㅇㅇ 로컬에는 그대로 저장되어 있다.

문제는 빈칸에 다시 할일을 입력하면 value의 값이 다 사라지게 된다. 값이 덮어쓰여지는거다.

---

니꼬는 단순 텍스트로 저장되는걸 원하지 않는다. 배열(array)로 저장하고 싶다.

우리는 브라우저가 가지고 있는 어떤 기능을 이용할거다.

JSON.stringify( ) : JS object나 array나 어떤 것이든 string으로 바꿔주는 기능이다.

localStorage.setItem("todos",JSON.stringify(toDos)
[밥,청소,공부,운동] -----> ["밥","청소","공부","운동"]

다음 영상에서는 어떻게 로컬에 있는 것들을 불러오는지 배울 것이다.

근데, 아직 새로고침하면 덮어쓴다....이것도 고칠거다.