- todo - list의 배열 생성
1) const toDos = [ ]; // toDo에 들어오는 텍스트를 배열로 묶어 보관하기 위해 빈 array를 생성해준다.
- 저장 기능을 함수를 정의한다.
1) 아직 기능을 하진 않지만 우리는 화면에 나타낸 텍스트를 저장할 것이기 때문에 대충 그러한 기능을 하는 함수가 있다고 치고 빈 함수
function saveToDos( ) {
};
를 생성한다.
2) 앞에서 만들었던 함수 handleToDosubmut( ); 의 맨 마지막에 저장 기능을 실행할 saveToDos(); 넣어두고 다음에서 기능을 구현한다.
- todo - list를 저장하는 기능을 수행하는 함수 설정
1) function saveToDos( ) { localStorage.setItem("todos",toDos); } 에 "todos"라는 이름의 카테고리로 저장한다.
2) 하지만 이렇게 저장하게 되면 직접 localStorage 에서 확인해봤을 때 값들이 array안에서
string의 형태가 아닌 상태로 저장된다.
예) key: todos value: a,b,c
3) 하지만 우리는 값들을 string의 형태로 toDos라는 array에 집어넣고 싶기 때문에 JSON.stringify()를 사용한다. 이 도구는 우리가 대입한 값을 알아서 string의 형태로 바꿔준다.
예) key: todos value: ["a", "b", "c"]
JSON 메서드는 대표적으로 두가지가 있다.
1. JSON.stringify – 객체를 JSON으로 바꿔준다.
=> 객체를 문자열로 바꿔준다.
2. JSON.parse – JSON을 객체로 바꿔준다.
=> JSON으로 인코딩된 객체(문자열로 바뀐 객체)를 다시 객체로 바꿔준다.(디코딩)
