#7.4 Loading To Dos part One

• JSON.parse : 자바스크립트 객체를 만들어줌

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

const TODOS_KEY = "todos";

const toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //배열을 문자열로 만들어줌
}

function deleteToDo(event){
    const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
    li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos(); 
}

toDoForm.addEventListener("submit",toDoSubmit);

function sayHello(item){
    console.log("이거다",item);
}

const savedToDos = localStorage.getItem(TODOS_KEY); //그냥 string

if(saveToDos !== null){
    const parsedToDos = JSON.parse(savedToDos); //array
    parsedToDos.forEach(sayHello); //array에 있는 각각의 item에 대해서 함수를 실행하게 함 
    //parsedToDos.forEach((item) => console.log("이거다",item));
}