< To Do List >

Saving To Dos

todo list를 만들고, 내용을 저장해보자

todo array

배열을 만들어서 입력받은 todo 를 배열에 넣어보자

//todo.js
const toDos=[];
function handleToDoSubmit(event){
  //입력 받음
  toDos.push(newTodo);
  //화면에 입력 그리는 함수
}

save at local stoarge

local storage에 입력받은 내용을 저장해보자

//todo.js
function saveToDos(){
  localStorage.setItem("todos", toDos); //todos를 key로 가지는 value인 toDos를 localStorage에 저장한다. 그러면 입력할 때마다 value만 바뀐다.
}
function handleToDoSubmit(event){
  //...
  saveToDos();
}

지금 코드는 localStorage에 있는 내용이 화면에 출력되지 않고, 새로고침 후 값을 입력하면 기존 내용을 없어지고 새로운 내용만 입력 된다.

JSON.stringify

객체나 배열 등 어떤 JavaScript코드건 string으로 만들어 준다.

const player = {name:"nico"}
JSON.stringify(player) //"{\"name\":\"nico\"}"

//todo.js
function saveToDos(){
  localStorage.setItem("todos", JSON.stringify(toDos)); //Key : todos, Value : ["a", "b", "c", "a"]
}

중복도 가능하다.
새로고침 후에 값을 덮어쓰는건 여전하지만, 이제 화면에 그릴 수 있게 됐다.

JSON.parse

string을 배열로 바꿀 수 있다.

JSON.parse(localStorage.getItem("todos")) //["a","b","c"]
localStorage.getItem("todos") //"[\"a\",\"b\",\"c\"]"

//todo.js
const TODOS_KEY="todos"
//...

const savedToDos = localStorage.getItem(TODOS_KEY); //["as", "as", "a"] string이다.
if(savedToDos){
  const parsedToDos = JSON.parse(savedTodos); //["as", "as", "a"] array다.

forEach

array에 있는 각각의 item에 대해 함수를 실행할 수 있게 한다.

//todo.js
function sayHello(item){
  console.log("this is the turn of", item);
}
if(savedToDos){
  //...
  parsedToDos.forEach(sayHello);
}

//위와 같은 방법으로 
if(savedToDos){
  //...
  parsedToDos.forEach((item) => console.log("this is the turn of", item));
}
//이렇게 더 짧게 쓸 수도 있다. 화살표함수이다.

이제 화면에 출력해보자

//todo.js
if(savedToDos){
  const parsedTodos = JSON.parse(savedToDos);
  parsedToDos.forEach(paintToDo); //paintToDo는 텍스트를 받는데, JavaScript는 텍스트를 paintToDo에게 전달해준다.

화면에 출력은 잘 되지만, localStroage를 보면, 새로고침 후 기존 값이 없어지는것은 여전하다.
application이 시작될 때 마다 toDos 배열이 항상 초기화되기 때문이다.

const toDos를 let으로 바꿔서 업데이트가 가능하게 만들고, localStorage에 toDo들이 들어있으면 toDos에 parsedToDos를 넣어서 전에 있던 toDos를 복원해야 한다.

아직 이해가 덜 됐으니까 나중에 다시 듣자