Javascript-10.todo list 새로고침해도 저장하기

Hyunah Park·2021년 7월 7일
0

JS

목록 보기
10/14

화면에 todo list가 그려져도,
새로고침하면 없어진다.

local storage에 기록된 todo list는 새로고침해도
화면에 그려진채 있어야 한다.

그러기 위해서 우선 savedTodos를 변수로 만든다.

const savedTodos = localStorage.getItem("todos")

그런다음,
저장된 todos가 존재한다면
그것을 parse해주고, parse한 각각의 아이템을 화면에 리스트로 보여주어야 한다.

따라서 조건문을 통해 todos가 있는지 확인하고,
parsedTodos 변수를 만든다.

if (savedTodos !== null){
  const parsedTodos = JSON.parse(savedTodos);

그리고 각각의 아이템을 paint 해준다.

  parsedTodos.forEach(paintTodos);

그런데
const toDos = []
이 코드에서 빈 array로 toDos가 항상 세팅되기 때문에
예전 값만 저장하고 새로운 값이 저장되지 않는 문제가 있다.
이것을 해결하기 위해
toDos array를 let으로 선언하고
parsed Todo를 toDos array에 할당해준다.

const savedTodos = localStorage.getItem("todos")
console.log(savedTodos);
if (saveTodo !== null){
    const parsedTodos = JSON.parse(savedTodos);
    toDos = parsedTodos;
    parsedTodos.forEach(paintTodo);
}

profile
hello world explorer

0개의 댓글