[노마드 바닐라JS 챌린지] Day.12 ToDo

localStorage

출처 : 강의7.8 댓글

내가 이해한 걸 적어볼까?

그대로 슝슝 읽으면 이해가 될거야!!!

우리가 지정한 리스트들이 새로고침 되었을 때

초기화되지 않으려면 저장을 하는 것이 중요해

어디에 저장을 할거냐면

localStorage!

web상에다가 우리의 데이터들을 저장할 수 있는거지

어떻게 저장할거냐면

localStorage.setItem("키", "값");

키에는 내가 저장하려고 하고 싶은 db 덤탱이에 이름을 정해주는 것

값에는 각각의 데이터 값들을 의미한다.

값에 여러개의 데이터를 넣고 싶은데 어떻게 해?

배열 형식으로 넣으면 돼

근데 배열형식으로 그냥은 안 넣어져

그래서 string 형식으로 바꿔줘야해

배열을 "값" 부분에 저장하고 싶으면

JSON.stringify

을 사용해서 string형식으로 바꿔준다

그럼 "["a","b","c"]" 요로케 된다.

근데 이러면 배열 형식을 사용할 수 없잖아.

그래서 JSON.parse()를 사용하는 것이다.

그럼 string이 아니라 우리가 원하는 배열의 모습이 될테니까!!!

["a","b","c"] 요로코롬 이뿌게

근데 배열로 하면

삭제를 할 때 중복된 내용의 데이터 값들이 들어있거나 그러면

값들을 찾기 어려워지니까

id값을 지정해줄 필요가 있다.

근데 배열에 id값을 어떻게 정해줘?

그래서 우린 객체로 바꿔준다.

{text: "a", id= ""} 이런식으로

id는 자동으로 중복되지 않게 만들어줘야 하는데

좋은 방법이 있다.

그것이 바로 Date.now()이다.

이걸 사용하면 중복될 일이 없음

이 아이디값을 li에 id값과 동일시해주고

li의 id값을 선택해서 그 해당 데이터를 삭제한당

 

• 배열을 문자열로 JSON.stringify
• 문자열을 오브젝트로 JSON.parse

---

localstorage.setItem('keyName','keyValue')
우리는 로컬저장소의 keyValue를 배열로 만드는 방법을 이해하고 이를 활용할 수 있다.

keyName 에는 하나의 keyValue만 저장된다.
하지만 keyValue 를 'toDos'라고 하고, toDos = [ ] 라고 하여 우리는 그 안에 하나 이상의 정보를 넣을 수 있게 한다.
👉🏻function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
=== localstorage.setItem('todos','[]')
```

toDos.push(newTodo)로 이 하나의 keyValue라는 상자 안에 하나 이상의 정보를 담아버리기~~

그리고 다시 저장된 것을 가져올 때에는
```
const savedToDos = localStorage.getItem(TODOS_KEY);
//getItem으로 호출하면 'value' 형태로 호출된다. '' 가 붙은 상태로 호출된다는 말.
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos); //getItem의 '' 를 parse 로 삭제.
toDos = parseToDos; // [ ] = ['a','b','c']
parseToDos.forEach(paintToDo);
}
```

---

 

const toDos = []; => application이 시작될 때마다 toDos array는 항상 비어있기 때문에 새로운 것만 저장되는 거다.
그래서 newToDo를 작성하고 form을 submit 할 때마다 newToDo를 toDos array (빈 array)에 그냥 push 하게 된다.
그리고 그 toDo를 저장할 때 나는 새로운 toDo들만 포함하고 있는 array를 저장하는거다.

이 array는 이전의 toDo들은 가지고 있지 않다. 전에 있던 toDo들은 localStorage에 들어있다.

새로운 toDo들은 사용자가 입력하는 것이다.
우리는 단지 newTodo들만 toDos array에 추가해서 단지 newToDo들만 localStorage에 저장하고 있는거다.

즉, 우리가 갖고 있던 toDos의 이전 복사본을 잊어버리고 있다는 말이다.

======해결 방법=======
application이 시작될 때 toDos array를 빈 값으로 시작하는 대신에, const를 let으로 바꿔서 업데이트가 가능하도록 만들고, localStorage에 toDo 들이 있으면 toDos에 parsedToDos를 넣어서 전에 있던 toDo들을 복원하면된다.

 

// parsedToDos.forEach((item) => console.log("this is the turn of", item));
// == function sayHello(item){ console.log("this is the turn of", item); }

 

---

리스트를 지울 때 몇번 째 li인지 모르니까 id를 랜덤 수로 주고,

로컬스토리지에 저장된 해당 값도 같이 없어져야함.

-->예전 array는 실제로 작업x. fillter function 사용해서 새 array를 줄 것임.

fillter

fliter 함수를 사용 --> array에서 뭔가를 삭제할 때 실제로 array에서 지우는 게 아닌 지우고 싶은 item을 빼고 새 array를 만듦. (item을 지우는 게 아닌 item을 제외하는 것)

  filter -> 선택옵션  

 

boolean(참 거짓)을 이용한 함수sexyFilter를 만들고

그 안에 !== (not) 을 활용해서 우리가 삭제하고픈 애를 뺀 나머지만 return 하게 한다.

--> array의 item을 유지하고 싶으면 true를 리턴해야하 된다는 것을 알 수 있다.

function sexyFilter(){return true} -> array의 item을 유지하고 싶으면 true를 return!
[1,2,3,4,5].filter(sexyFilter)
(5) [1, 2, 3, 4, 5]

function sexyFilter(){return false}
[1,2,3,4,5].filter(sexyFilter)
[]

function sexyFilter(item){return item !== 3} -> item이 3이 아니면 true를 return!
[1,2,3,4,5].filter(sexyFilter)
(4) [1, 2, 4, 5]

const arr = ["pizza", "banana", "tomato"] -> arr 배열에서 banana를 지우고 싶음!
function sexyFilter(food){return food !== "banana"}
arr.filter(sexyFilter)
(2) ['pizza', 'tomato']

const arr = [1234, 5656, 454, 343, 12, 4646, 405] -> 1000보다 큰 수를 모두 제외하기!
function sexyFilter(num){return num arr.filter(sexyFilter)
(4) [454, 343, 12, 405]

const todos = [{text:"lalala"}, {text:"lololo"}]
function sexyFilter(todo){return todo.text != "lololo"}
todos.filter(sexyFilter)
[{…}]0: {text: 'lalala'} length: 1 [[Prototype]]: Array(0)

-> 함수(sexyFilter)의 argument는 항상 달라도 상관 xx, filter가 각 todos의 item을 todo의 argument로 넣어 줌

 

 

 

---

To Do List 최종 코드

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

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 
}

function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();
    // typeof li.id == string ,typeof toDo.id == number
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

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

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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