Saving To Dos

이번에는 작성한 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에 넣어주는 단 하나의 역할을 한다.

toDos array의 내용을 localStorage에 넣어주는 saveToDos() 함수

 

다시 차례로 정리해보면 사용자가 form을 submit하면, input을 비우고 그 텍스트(newTodo)를 toDos array에 push한 다음 화면에 toDo를 그려주고 saveTodo()를 실행하는 것이다.

이제 페이지에서 다시 a, b, c 를 입력하고 Application 창을 확인해보면 localStorage에 a, b, c 가 저장된 것을 확인할 수 있다.

입력한 text가 localStorage에 저장됨

이를 새로고침 하면 화면의 toDo는 사라지지만 localStorage에 여전히 남아있는 것을 확인할 수 있다.

새로고침 하면 입력한 텍스트가 화면에서는 사라지지만 localStorage에 여전히 남아있음

하지만 내가 a를 또 입력하면 a, b, c 가 모두 사라지고 a만 새로 저장되는 문제점이 있다.

a를 또 입력하면 저장되어 있던 것들이 사라짐

먼저 localStorage에 저장되는 값들이 text가 아닌 array로 저장하고 싶은데

text로 저장된 값

내가 원하는 array로 저장된 모습

앞전에 얘기했던 것처럼 array로는 저장할 수 없으므로 

텍스트를 얻긴 해도 array 처럼 보이도록 하면 된다.

text 이지만 array 처럼 보임

 

그래서 우리는 브라우저가 가진 어떤 기능을 사용할 것인데,

그것은 JS object나 array나 어떤 것이든 string으로 바꿔주는 기능이다.

예를들어 내가 중괄호 안의 내용을 string으로 바꾸고 싶다면

그냥 player를 JSON.stringify() 안에 넣기만 하면 되는 것이다.

즉, toDos를 stringify 하면 된다.

이제 다시 페이지에서 텍스트 값들을 입력한 다음 확인해보면 이 값들이 array의 모양으로 확인된 것을 알 수 있다.