javascript (12) - ToDoList #2

ToDoList 추가하기 #2

1. 삭제 버튼 추가 (삭제기능)

2. 내용 저장 (새로고침 후 내용 유지)

3. 저장된 내용 삭제하기

const toDoForm = document.querySelector("#todo-form");

const toDoInput = toDoForm.querySelector("input")

const toDoList = document.querySelector("#todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveTodo() {

localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));

}

function deleteTodo(event) {                     //삭제기능

const li = event.target.parentElement;

li.remove();

toDos = toDos.filter(todo => todo.id !== parseInt(li.id));

saveTodo();

}

function paintToDo(newTodo) {

const li = document.createElement("li");

li.id = newTodo.id;

const span = document.createElement("span");

span.innerText = newTodo.text;

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();

const newTodo = toDoInput.value;

toDoInput.value = "";

const newTodoObj = {

text: newTodo,

id: Date.now(),

};

toDos.push(newTodoObj);

paintToDo(newTodoObj); //html에 id값을 전달하기 위해서

saveTodo();

}

toDoForm.addEventListener("submit", handleToDoSubmit);

const saveToDos = localStorage.getItem(TODOS_KEY);

if (saveToDos !== null) {

const parsedToDos = JSON.parse(saveToDos);

toDos = parsedToDos;

parsedToDos.forEach(paintToDo);

};

---

1-1. 삭제버튼 추가

function paintToDo() 함수에 추가

const button = document.createElement("button")  -  <button>태그를 변수 button에 저장

button.innerText = "x"  -  <button> 태그에 x이모지 추가

button.addEventListener("click", deleteTodo)  -  버튼 클릭시 deleteTodo 함수 실행

li.appendChild(button)  -   <li>태그 하위에 <button> 위치 설정

---

1-2. 삭제기능 설정 (html만 삭제)

functiom deleteTodo(event) {  const li = event.target.parentElemet;   li.remove();  }

버튼 클릭 시 event로 감지할 수 있는데 어떤 <li>를 삭제해야 하는지 모름.

클릭 event 정보를 통해 알 수 있음. console.log(event); - taget

console.log(event.target) - 클릭이 감지된 html의 element  =>  <button> x </button>

console.log(event.target.parentElemet) - <button> x </button> 의 부모 element  =>  <li> </li>

---

2-1. 내용 저장

array를 만들어 localStorage이용하여 저장

const toDos = []; // 처음 비어져있는 배열 생성 function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDoInput.value; toDos.push(newTodo);  // toDos 배열에  입력받은 내용 저장 paintTodo(newTodo);       // html추가하는 함수 saveTodo();                       // localStorage 저장함수 }

 생성된 배열을 LocalStorage에 저장 (단, localstorage에는 string만 가능, 배열 불가능)

function saveTodo() {    localStorage.setItem("todos", toDos); }

--------문제점 : 1. 새로고침하면 화면에서는 사라지지만 storage에는 남아있음

                           2. 새로고침 후 입력하면 기존 저장된 storage 내용을 덮어버림

 

LocalStorage에 저장된 내용이 배열형태로 저장되면 활용하기 좋기 때문에

object 나 array 어떤 것이든 string으로 바꿔주는 기능을 써야한다.

-> const player = {name:"p"} -> JSON.stringify(player) -> '{"name":"p"}'  function saveTodo() {    localStorage.setItem("todos", JSON.stringify(toDos)); }

---

2-2. 새로고침 후 유지 (불러오기)

LocalStorage에 배열형태로 저장된 값을 다시 배열, object로 변경해서 불러온다.

JavaSctipt는 Array의 각 item에 대해 function을 실행할 수 있다!

-> const string= "["a", "b", "c"]" -> JSON.parse(string) -> [a, b, c] const saveToDos = localStorage.getItem("todos"); if (saveToDos !== null) { const parsedToDos = JSON.parse(saveToDos); toDos = parsedToDos; parsedToDos.forEach(paintToDo); };

forEach 예문 function sayHello() {  console.log("hello"); } const saveToDos = localStorage.getItem("todos"); if (saveToDos !== null) { const parsedToDos = JSON.parse(saveToDos); parsedToDos.forEach(sayHello); }; ---> array Item 수만큼 hello가 출력된다. ----> forEach는 array item을 각각 가져와 함수를 실행한다. function sayHello(item) {  console.log("hello", item); } const saveToDos = localStorage.getItem("todos"); if (saveToDos !== null) { const parsedToDos = JSON.parse(saveToDos); parsedToDos.forEach(sayHello); }; ---> array = [a, b, c]라면 ----> hello a , hello b, hello c로 출력된다. ------> sayHello("a") ~ sayHello("c")

*sayHello() 함수를 사용하지 않고 forEach를 줄여 사용할 수 있다.

 화살표함수 arrowfunciton

 ㄴ parsedToDos.forEach((item) => cosole.log("hello", item));

if (saveToDos !== null) { const parsedToDos = JSON.parse(saveToDos); parsedToDos.forEach(paintToDo); }; paintToDo(a)~paintToDo(b) //문제점 : 1. 새로고침하면 화면에서는 사라지지만 storage에는 남아있음 (해결)

문제점 2는 동작할 때마다 toDos = []; array이 항상 비어있기 때문에

새로고침 후 입력 시 localStorage 값을 덮어씌운다.

const toDos = []      --->      // 변경이 가능한 let toDos = [];  변경 if (saveToDos !== null) { const parsedToDos = JSON.parse(saveToDos); toDos = parsedToDos;        // toDos에 전에 있던 내용들을 복원 parsedToDos.forEach(paintToDo); }; //문제점 : 2. 새로고침 후 입력하면 기존 저장된 storage 내용을 덮어버림(해결)