JavaScript #22

210805
JavaScript #22

---

• ToDo 저장하기

local storage를 활용한다.

1. 입력한 값 local Storage에 저장
2. local Storage에서 값을 불러와서 화면에 출력

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


const toDos = []

function saveToDos(){ // local storage에 저장하는 함수
  localStorage.setItem("todos", toDos)
}

function deleteToDO(event){ // todo 삭제 함수
  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)
}

function handleToDoSubmit(event){
  event.preventDefault()
  console.log(toDoInput.value)
  const newTodo = toDoInput.value // 값을 복사
  toDoInput.value = ""  // 엔터를 치고 값을 비운다.
  toDos.push(newTodo) // toDos에 push
  paintToDo(newTodo)  // todo를 화면에 보여주는 함수
  saveToDos() // todo 저장하는 함수 호출
}

toDoForm.addEventListener("submit", handleToDoSubmit)

저장이 된다.

이 값들을 array 처럼 보이게 해보자

-JSON.stringify()
JS object나 array 혹은 어떤 JS 코드건 간에 string으로 만들어준다.

function saveToDos(){ // local storage에 저장하는 함수
  localStorage.setItem("todos", JSON.stringify(toDos))
}

-JSON.parse()
이렇게 만들어진 string을 JS가 이해할 수 있는 array로 만든다.

해당하는 array를 가지고 각 toDo들을 사용할 수 있어야 한다.
각각의 item에 대해서 무언가를 해야한다. -> 이 기능은 JS에 있다.

-forEach()
array에 있는 각각의 item에 대해서 function을 실행할 수 있게 한다.

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

const TODOS_KEY = "todos"

const toDos = []

function saveToDos(){ // local storage에 저장하는 함수
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos))
}

function deleteToDO(event){ // todo 삭제 함수
  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)
}



function handleToDoSubmit(event){
  event.preventDefault()
  console.log(toDoInput.value)
  const newTodo = toDoInput.value // 값을 복사
  toDoInput.value = ""  // 엔터를 치고 값을 비운다.
  toDos.push(newTodo) // toDos에 push
  paintToDo(newTodo)  // todo를 화면에 보여주는 함수
  saveToDos() // todo 저장하는 함수 호출
}

toDoForm.addEventListener("submit", handleToDoSubmit)

function sayHello(item){
  console.log("this is the turn of", item)
}
const savedToDos = localStorage.getItem(TODOS_KEY)

if(savedToDos!==null){
  const parsedToDos = JSON.parse(savedToDos)
  parsedToDos.forEach(sayHello);
}

변환된 todo들에 foreach를 적용해서 함수를 실행시켜보았다.
forEach에도 eventListenr의 event가 전달되는 것 처럼 item이 있다.

참고
https://nomadcoders.co/javascript-for-beginners/lobby