Today I Learned #7

<li>를 Local Storage에 저장하기

지난 TIL에서 사용자의 입력이 submit된 경우 paintToDo()를 통해 화면에 출력되도록 하였다. 하지만 출력된 계획들은 새로고침을 하는 경우 다시 입력해주어야하는 불편함이 있고, 사용자의 이름을 저장했던 것처럼 Local Storage를 활용하여 저장해보도록 하겠다.

paintToDo(text) 수정

이전까지의 작업으로 인해 submit시 출력은 정상적으로 작동하기 때문에, paintToDo(text)에서 기존의 코드는 그대로 둔 채로, LS로의 저장을 추가해주어야 한다. 그러기 위해서 가장 먼저 하는 것은 Divide이다. const toDos = [];로 선언된 array안에 입력들을 넣어주고, 새로운 submit이 발생할 때마다 해당 toDos를 LS에 저장하는 방식으로 진행할 예정이다. 또한 toDos를 선언함으로서 기존의 코드에서 페이지가 로드됨과 동시에 작동하던 function toDos()를 loadedToDos()로 수정해주었다.

이후 toDoObj라는 object를 text,id를 갖게 함으로서 몇번째 To Do List인지(id), 어떤 내용인지(text)를 알 수 있도록 하였다. id는 기존에 선언된 toDos의 길이를 반환한 값에 +1을 해주었다. 최초 선언시 toDos는 비어있는 array이기 때문에 length값이 0이고, 거기에 1을 더해주기 때문에 첫번째 toDoObj의 id는 1이고, 이 toDoObj가 추가되면 자연스레 id가 2로 넘어가는 방식이다.

이후에는 이 Obj를 push()를 통해서 toDos에 추가해주고, 추가된 값을 LS에 저장해 주어야하는데, 해당 기능은 다른 함수를 통해 진행하도록 Divide 하였다.

saveToDos()

사용자의 To Do List를 저장하기 위해서 선언된 함수 saveToDos()의 내부에는 Local Storage에의 저장을 의미하는 setItem()을 통해 toDos를 TODOS_LS에 저장하도록 하는 기능을 작성하였다.

function saveToDos() {
    localStorage.setItem(TODOS_LS, toDos);
}

다음과 같은 코드를 실행시켜보자, LS에 무언가가 저장되긴 하였지만, toDos의 value로 저장된 값이 {"object":object, "object": object}로서 저장이 되었다. 이러한 현상이 발생된 원인은 Local Storage에는 javascript의 object가 저장되지 않기 때문이며, JSON을 이용하여 localStorage.setItem(TODOS_LS, JSON.stringify(toDos));로 코드를 수정해주자 내가 원하는 형태로 저장이 되었다.

JSON?

그렇다면 방금 사용한 JSON.stringify()는 뭘까?
JSON이란, JavaScript Object Notation으로, MDN 문서에 따르면 javascript 객체를 데이터로서 다룰 수 없는 한계를 극복하기 위해 생겨난 표준 포멧입니다.

saveToDos()에서 사용한 stringify()는 object를 string으로 바꿔주기 위해 사용되었다. 당연하게도, 변환되어 LS에 저장된 string을 코드 내에서 다시 활용하기 위해서는 parse()를 통해 string을 object로서 바꿔야함을 유추할 수 있다.

loadToDos()

지금까지의 진행을 정리하자면, submit이 발생했을때, paintToDo()에서 단순히 출력을 해주던 기능에 Local Storage에도 저장하도록 하는 기능을 추가해주었고, 그 기능은 saveToDo()라는 함수의 내부에서 진행되며, object로서 사용되던 toDos를 JSON.stringify()를 통해 string으로 변환하여 LS에 저장을 해주었다. 이제 해야할 일은 이 저장된 데이터들을 사용자가 새로고침을 한 이후에도 출력된 상태로 보여주도록 하는 기능을 추가해야하는데, 이 기능을 init()이후 가장 먼저 실행되는 loadToDos()에 구현하도록 하겠다.

가장 먼저 LS에 저장된 toDos를 불러온다.

const loadedToDos = localStorage.getItem(TODOS_LS);

만약 loadedToDos가 null이라면, 출력해야할 내용이 없기 때문에 아무것도 실행하지 않고 사용자의 입력을 기다리고, null이 아닌 경우에만 LS에 존재하는 toDos를 출력하면 된다. 따라서,

if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
    }

와 같이 코드를 작성하였다. 앞서 JSON에서 언급했듯, string 형태의 데이터를 object로서 사용하기 위해서 JSON.parse()를 사용하고, 이 값을 forEach(function)라는 callback 함수를 사용하여 array내부의 각 원소에 function을 사용하도록 하였다.

callback function forEach()란 array에 사용되는 경우 각종 프로그래밍 언어에서 for문을 통해 lengh만큼 반복하며 각 index의 원소를 처리하는 방식과 같은 작동을 하는 함수이고, 인자로서 function을 받아 해당 함수를 각 원소에 작동하도록 합니다.

따라서 loadToDos()에서는 LS에 존재하는 toDos의 value를 object화 하여 array로서 저장된 parsedToDos의 각 원소를 forEach()함수를 통해 불러오고, 그 안의 함수로 toDo를 인자로 하고, toDo.text를 paintToDo(toDo.text)하도록 하였다.