nomard crome app 7
todo-list 2
saveToDo
하지만 아직 저장을 하고 있지 않는다.
const toDos = [];
function saveToDos() {
localStorage.setItem("todos", toDos);
}
toDos에 빈배열을 변수로 넣고 localStorage에 todos 키를 갖는 빈배열 toDos를 넣는다.
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
toDos.push(newTodo);
paintToDo(newTodo);
saveToDos();
}
처음에 작성했던 submit 함수에 newTodo를 빈배열 toDos에 pust하는 메소드를 paintToDo 위에 작성 그리고 saveToDos를 통해 localStorage에 저장한다.
아직 새로고침을 하면 document에서는 사라짐
또한 storage에서도 ‘a,b,c,d,f,g’ 로 표현됨 하지만 array로 만들고 싶다
[‘a’, ‘b’, ‘c’, ‘d’, ‘f’, ‘g’]
따라서 object나 array나 어떤 것이든 string으로 바꿔주는 기능을 알아야한다.
JSON.stringify
const player = { name: "DK" };
JSON.stringify(player); // '{"name":"DK"}'
const toDos = [];
function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos));
}
콘솔에서 localStorage.getItem(“todos”); // ‘[“a”, “b”, “c”]’
빈배열이었던 toDos까지 string화 되어서 localStorage 저장되었다.
반대로 JSON.parse로 되돌릴 수 있다.
const TODOS_KEY = "todos";
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
다 지우고서 시도하면 null을 반환
forEach
function say() {
console.log("hello"); // hello hello hello
}
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(say);
}
배열의 요소 개수에 따라 반환
function say(item) {
console.log("this is the turn of", item);
}
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(say);
}
// this is the turn of a
// this is the turn of b
// this is the turn of c
parsedToDos 배열의 item(은 array 안의 요소)을 받아서 콘솔을 찍어라
또한 이 코드를
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach((item) => console.log("this is the turn of", item));
}
로 표현 가능
따라서
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(paintToDo);
}
parsedToDos 배열의 item(은 array 안의 요소)을 받아서 paintToDo를 실행해라(화면에 띄워라)
toDos = parsedToDos
하지만
const toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
저장할 때 빈 배열부터 시작을 하기 때문에 새롭게 추가하는 것만 저장된다.
let toDos = [];
로 바꿔서 상태를 바꿀 수 있도록 해주고
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}
저장되어있던 storage를 나타낼 때 빈 배열인 toDos에 추가를 한 뒤에 화면에 나타나도록 한다.
id: Date.now
하지만 삭제를 해도 storage에 남아있고 새로고침을 누르면 다시 화면에 보인다.
어떤 HTML element가 삭제되어야하는지 알기 때문에 화면에서는 삭제가 가능하지만 toDos array에서는 무엇이 삭제되어야 하는지 모르는 상태이기 때문에 local Storage에서 삭제되지 않는 상태이다
toDos를 object로 만들어서 todo 하나에 고유한 id를 보유하게 하자
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodo);
saveToDos();
}
Date.now()는 1000분의 1초를 주는 함수다.
newTodoObj라는 변수에 obj형태의 newTodo를 할당 toDos array에는 이제 newTodoObj를 push한다.
text만 화면에 보여주고 id는 형성되었다.
paintToDo(newTodoObj); 로 바꾸면 text와 id가 보이는 것이 아니고 [object Object] 이라고 표시된다.
따라서 paintToDo의 function부터 Obj를 받도록 고쳐나가야 한다.
function paintToDo(newTodo) {
const li = document.createElement("li");
li.id = newTodo.id; // li를 만들면서 id로 newTodo.id를 받도록 한다.
const span = document.createElement("span");
span.innerText = newTodo.text; //span에는 newTodo.text가 들어가 도록한다.
const button = document.createElement("button");
button.innerText = "X";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
filter
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
에서 console.log(li.id)를 하면 X를 클릭한 toDos의 id를 구할 수 있다.
또한 filter를 이용해서 li.id와 동일한 toDos의 id를 제외할 수 있다.
filter는 arr.filter(fn)의 형식으로 쓰이며 fn은 분드시 true를 리턴해야한다.
새로운 array에서도 모든 요소들을 포함하고 싶다면 하지만 false를 반환하면 그 item은 새 array에 포함하지 않을 것이다.
const arr = ["pizza", "banana"];
function sexyFilter(food) {
return food !== "banana";
}
arr.filter(sexyFilter); // ["pizza"]
처럼 동작한다. 따라서
const todos = [{ text: "lalala" }, { text: "lololo" }];
function sexyFilter(todo) {
return todo.text !== "lololo";
}
const newtodos = todos.filter(sexyFilter); // [{text: "lalala"}]
filter function은 새 array를 준다는 것을 기억해야 한다. 따라서 위 코드에서 todos와 newtodos는 다르다.
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((toDo) => toDo.id !== li.id);
console.log(toDos);
}
하지만 삭제되지 않고 console에 모든 toDos가 그대로 나온다 이유는
console.log(typeof toDos[0].id); // number
console.log(typeof li.id); // string
이기때문이다.
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
saveToDos();
따라서 parseInt를 씌워서 타입을 숫자로 만들고 saveToDos();를 사용해서 저장한다.
댓글남기기