[JS] TO DO LIST를 localstorage에 저장하기_1 (JSON.stringify/JSON.parse/forEach)
[ 노마드코더 학습 기록 ]
바닐라 JS로 크롬 앱 만들기
(7.3 Saving To Dos ~ 7.4 Loading To Dos part Two )
지금 크롬앱은 새로고침을 하면 작성했던 TO DO LIST가 전부 사라진다.
이번엔 작성한 TO DO LIST를 저장하는 기능을 구현해보도록 하자 !
브라우저에 어떻게 저장할 수 있을까? 이미 로그인 기능을 구현할 때 해보았다.
바로 localStorage를 이용하는 방법 !
시작🦩
const toDos = [];먼저 todo를 저장해 줄 array를 만든다.
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
}그리고 newToDo가 그려질 때마다 그 텍스트를 array에 push 해야하기 때문에
기존 코드에 todos.push(newToDo); 추가해준다.
내가 추가한 ToDo가 Array(todos)에 잘들어갔다.
오늘의 목표는 이것을 localStotage에 저장해야한다.
하지만
localStorage에 array는 저장할수가 없다
🙊
오직 텍스트만 저장할 수 있다.
function saveToDos() {
localStorage.setItem("todos", toDos);
}그래도 일단 해보자
저장 기능을 구현하는 function을 만들어준다.
saveToDos는 localStorage.setItem을 이용하여 toDos array의 내용을 localStorage에 넣어준다.
이 함수가 호출되는 시점에는 newToDo는 array에 들어있다.
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);기존 코드도 수정해주자
- 잠깐 정리 -
사용자가 form을 submit하면
handleToDoSubmit Function이 input을 비우고
그 텍스트(newToDo)를 toDos array에 push한 후 화면에 ToDo를 그려준다.
그리고나서 saveToDos가 실행되어 tToDo들을 저장하는 것이다.
실행 후 Application을 살펴보면 localStorage에
todos가 a,b,c,d value로 저장되어있는 것을 확인할 수 있다.
새로고침을 하면 어떨까?
화면에선 모두 지워졌지만 localStorage에는 남아있다.
그리고 또 하나의 문제는 저 상태로 todo를 추가하면
a,b,c,d가 지워지고 a(새로 추가한 todo)로 바뀌게 된다.
문제들을 해결해보꽈
먼저 현재는 a,b,c,d 단순한 텍스트로 저장되고 있다.
하지만 ["a", "b", "c", "d"] array로 저장하고 싶다
위 이미지처럼 value를 클릭하여 직접 바꿔주는 무식한(?) 방법도 있다
근데 저건 array처럼 보이는 것일뿐 array는 아니지만 array처럼 보이니 그걸로 됐다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그걸 위해서 브라우저가 가지고 있는 기능을 사용해보자.
JSON.stringify()
JS object나 array나 어떤 것이든 string으로 바꿔주는 기능이다.
JSON.stringify()를 사용하면 이렇게 어떤 코드든 string으로 바꿔버린다.
function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos));
}응용하여 코드를 수정한다.
array의 모양으로 저장되었다.
이제 array 모양으로 만들어주는게 왜 중요한지 이야기해보자 !
JSON.parse는 string을 가지고 JS의 object로 만들어준다.
즉 JSON.parse로 string을 array로 바꿀 수 있다는 뜻이다.
console에서 변경해보니 사진과 같이 무언가를 할 수 있는 배열로 변환되었다.
이제 이걸 이용하여 이제 코드를 작성해보자.
const TODOS_KEY = "todos"
function sayHello() {
console.log("hello");
}
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
if(savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(sayHello);
}먼저 localstorage에서 todos를 가져올텐데
todos가 중복되서 많이 쓰이니 TODOS_KEY라는 변수를 만들고 거기에 "todos"를 담아서
간편하면서도 실수하지 않게끔 사용한다.
그리고 처음 시작할때는 텅 비어있는것이 당연하기 때문에 localstorage에 todos가 없는 경우(null)도 생각해야 한다.
if문으로 작성해준다.
if(savedToDos) 또는 if(savedToDos)으로 작성할 수 있다.
그리고 parsedToDos라는 variable을 만든다.
얘는 위에서 해본것처럼 localstorage에서 가져온 string을 array로 변환하는 역할을 할 것 이다.
위 과정을 통해 array로 변형된 todos가 있으니 많은 것들을 할수있다.
화면에 뿌려주거나 텍스트를 변형하거나 이외의 것들을 할 수 있다.
가장 중요한건 array에 있는 각각의 item에 대해서 function을 실행할 수 있다는 것이다.
이게 바로 JS가 하는 일이다.
JS는 array에 있는 각각의 item에 대해 function을 실행할 수 있게 해준다.
array라서 forEach라는 것을 가지고 있는데 이걸통해 각 item에 Function을 실행할 수 있다.
이해를 돕는 실험을 위해 sayHello라는 function을 만들어준다.
이렇게하면 parsedToDos가 가지고 있는 각각의 item에 대해 "sayHello function을 실행해줘"라고
js에게 말할 수 있게 되는 것이다.
현재 hello가 4번 찍혔다.
array로 변환된 today에 item이 4개(a,b,c,d)가 들어가있기 때문이다.
4item, 4 hello
굿!
하지만 아직도 약간 헷갈린다
이럴때 더 세세히 알려주시는 니꼬쌤 짱...
먼저 처리되고 있는 item이 어떤 것인지 아는게 매우 중요하다
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);잠깐 이전에 작성했던 코드를 봐보자
submit eventListener가 event(argument)를 그냥 제공해주었던 것처럼
JS는 지금 처리되고 있는 item 또한 그냥 제공해준다.
function sayHello(item) {
console.log("this is the turn of", item);
}이렇게 argument를 item으로 넣을 수 있다는 말이다.
새로고침하면 this is turn of 뒤에 item이 하나씩 출력되는 모습이다.
이걸로 확실히 처리되고 있는 item을 알수있다.
+
같은 일을 하는 새로운 방법도 있다.단축키 같은 기능인데 sayHello와 같은 function을 많이 만들지 않아도 된다.
if(savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos);
// 화살표 함수
parsedToDos.forEach((item) => console.log("this is the turn of"), item);
}function을 지우고 이렇게 코드를 작성해도 똑같이 실행된다.
하지만 코드가 더 짧아진다는 장점이 있다!
이걸 화살표 함수(arrow function)라고 부른다.
전체 코드
const toDoForm =document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos"
const toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deletToDO(event) {
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newToDo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deletToDO);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach((item) => console.log("this is the turn of", item));
}TO DO LIST 저장하기 부분이 길어져서 나눠서 포스팅할 예정!