이번에는 작성한 toDo를 저장할 수 있게 만들어보자
저장을 하려면 localStorage를 이용하면 되는데
즉, 내가 a, b, c 를 입력하면 이것들을 localStorage에 저장하고 그 후에 새로고침 하면 다시 localStorage에서 그것들을 불러와서 화면에 표시한다는 것이다.
먼저 array를 만들어보자
그리고 이제 newTodo 가 실행될 때마다 작성되는 text를 array에 push하게 만들어보자
그래서 newTodo를 그리기 전에 toDos array를 가지고 와서 newTodo를 push하게 할것이다.
이제 toDo 에 a, b, c 를 입력하고 콘솔창에 toDos를 입력하면 toDos array가 생성된 것을 확인할 수 있다.
이제 이 array를 localStorage에 넣어보자
하지만 localStorage에는 array를 저장할 수 없고 오직 텍스트만 저장할 수 있다는 점을 알아두자
newTodo를 toDos array에 push 한 후에 화면에 그 toDo를 그려줬으니 function을 하나 더 만들어볼텐데,
saveToDos() 함수는 toDos array의 내용을 localStorage에 넣어주는 단 하나의 역할을 한다.
다시 차례로 정리해보면 사용자가 form을 submit하면, input을 비우고 그 텍스트(newTodo)를 toDos array에 push한 다음 화면에 toDo를 그려주고 saveTodo()를 실행하는 것이다.
이제 페이지에서 다시 a, b, c 를 입력하고 Application 창을 확인해보면 localStorage에 a, b, c 가 저장된 것을 확인할 수 있다.
이를 새로고침 하면 화면의 toDo는 사라지지만 localStorage에 여전히 남아있는 것을 확인할 수 있다.
하지만 내가 a를 또 입력하면 a, b, c 가 모두 사라지고 a만 새로 저장되는 문제점이 있다.
먼저 localStorage에 저장되는 값들이 text가 아닌 array로 저장하고 싶은데
앞전에 얘기했던 것처럼 array로는 저장할 수 없으므로
텍스트를 얻긴 해도 array 처럼 보이도록 하면 된다.
그래서 우리는 브라우저가 가진 어떤 기능을 사용할 것인데,
그것은 JS object나 array나 어떤 것이든 string으로 바꿔주는 기능이다.
예를들어 내가 중괄호 안의 내용을 string으로 바꾸고 싶다면
그냥 player를 JSON.stringify() 안에 넣기만 하면 되는 것이다.
즉, toDos를 stringify 하면 된다.
이제 다시 페이지에서 텍스트 값들을 입력한 다음 확인해보면 이 값들이 array의 모양으로 확인된 것을 알 수 있다.
'JavaScript' 카테고리의 다른 글
Loading To Dos part 2 (0) | 2022.03.18 |
---|---|
Loading To Dos part 1 (0) | 2022.03.15 |
Deleting To Dos (0) | 2022.03.09 |
ToDo - Set up (0) | 2022.03.05 |
Background (0) | 2022.02.27 |