[JavaScript] - To Do List 만들기②

https://taehyeon-smilestudy.tistory.com/27?category=1020508 

[JavaScript] - To Do List 만들기①

 

다음은 ul의 하위 요소로 들어가는 li span button을 만들어 줍니다.

function createToDo(newToDo) {
  const li = document.createElement("li");
  li.id = newToDo.id;
//li의 id에는 submit함수에서 사용된 id를 넣어줍니다.
//(나중에 삭제하는 함수를 만들때 위치를 찾을수 있게 id값을 넣어줌)
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = newToDo.text;
  button.innerText = "×";
  li.appendChild(span);
  li.appendChild(button);
//li의 자식노드로 span과 button을 추가합니다.
  todoListUl.appendChild(li);
//ul의 자식노드로 li를 추가합니다.
}

function submitToDo(submitEvent) {
  submitEvent.preventDefault();
  const inputValue = todoInput.value;
  todoInput.value = "";
  const newToDoOBJ = {
    text: inputValue,
    id: Date.now(),
  };
  toDos.push(newToDoOBJ);
  createToDo(newToDoOBJ);
  localSaveToDos();
}

submit 실행문을 만들고 작동이 되는지 확인을 해봅니다.

todoForm.addEventListener("submit", submitToDo);

 

입력한 값이 리스트로 나타나면서 작동되는 것을 확인할 수 있습니다.
하지만 새로고침을 하면 없어져 버리고 새로 입력하면 로컬스토리지에는 이전에 있던 값이 없어지고
그 위에 새로운 값이 덧씌워져 버리는데 이러한 이유는 이전에 있던 값들을 불러오지 못하고
새로운 값들만 다시 배열에 넣고 있기 때문입니다.

이것을 해결하기 위해 
로컬스토리지에 있는 키값(TODOS_KEY)을 가져오는 것을 변수로 지정하고
if 조건문을 이용하여 로컬스토리지에 키값이 있다면 그것을 불러와서 화면에 나타내 주는 함수를 만듭니다.

const savedToDos = localStorage.getItem(TODOS_KEY);
 
if (savedToDos !== null) {
  const parseToDos = JSON.parse(savedToDos);
  toDos = parseToDos;
  parseToDos.forEach(createToDo);
  //parseToDos를 createToDo의 매개변수로 넣고 처음부터 끝까지 돌려준다
  //parseToDos에 들어있는 배열값만큼 createToDo함수가 작동된다.
}