[JAVASCRIPT] 모멘텀 클론코딩 4-2

1. saveToDos() 함수 생성

- 이 함수는 localStorage 에 toDos 라는 key를 가지고 데이터를 저장하는 함수이다.

- 여기서 JSON(JavaScript Object Notation)을 이용하여 오브젝트 형태인 데이터를 string 으로 저장한다.

 

2. paintTodo(text) 함수

- newId 라는 변수를 하나 생성하여 toDos(배열)의 길이만큼 +1을 더하여 Id 값을 부여하였다.

- 그다음 li 요소에 id 라는 이름으로 newId를 지정함.

- 텍스트와 id를 저장하는 오브젝트를 하나 만들어서 오브젝트가 배열에 push 를 하게된다.

- 그 다음 saveToDos 함수를 이용하여 localStorage에 저장하게 한다.

3. loadToDos() 

- 이 함수는 새로고침을 해도 데이터가 없어지지 않고 데이터를 불러와 화면에 계속 나타나게 한다.

- localStorage 에서 TODOS_LS(toDos) 라는 key 값을 가진 데이터를 가져온다.

- 그다음 JSON 객체에 parse라는 함수를 이용하여 데이터를 string 으로 만든다.

- 마지막으로 forEach 를 이용하여 paintTodo 함수를 데이터의 개수만큼 반복하여 화면에 나타나게 한다.