👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#7.3-7.5

• saving todos/ loading todos
  ✔️toDos를 JSON.stringify 사용하여 문자화 해서 저장하고,
  저장한 내용을 다시 JSON.parse()로 배열화 시켜 forEach 로
  주어진 내용에 접근할 수있도록 하여 각각에 대해 실행시킨다.
  결과적으로 웹페이지를 새로고침하여도 화면상에 todolist가 표시되고
  localstorage에 저장되어 있다.

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDolist = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos(){
    localStorage.setItem("TODOS_KEY", JSON.stringify(toDos))
}
//JSON.stringify: 어떤 것이든 string화 시켜준다.
//JSON.parse():string을 배열로 바꿔준다.

//event.target을 사용하면 현재 이벤트가 발생한 요소의 속성들을 얻을 수 있다.
//Dom 객체이기 때문에 변경을 주고 싶다면 Dom메소드를 사용해야 한다.
//button 속성의 부모요소로 li를 가르킨다.
function deleteToDo(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",deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    toDolist.appendChild(li)
    
}
/* 삭제기능도 가능하도록:span을 만들어서 li 내부에 자식으로 넣음 그 다음에 new ToDo에 입력받은 값을 span내부에 넣음 */

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);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);

}
//JS는 배열에 있는 각각의 아이템들에 대해 function할 수 있게 해준다.
//toDoInput.value = "";(enter 히면 칸을 빈화면으로 비우도록 만든다.)