Vanilla JS # 07

Loading To Dos Part Two

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

Deleting To Dos Part one

기존의 문제점 : a,b,c,d,a 가 DB에 저장되어있으면 a를 삭제할때 어떤 a가 삭제되는지 모른다

그렇기에 각 array의 item에 id를 부여해서 고유의 정체성 을 갖게한다.

id값은 우리에게 랜덤한 숫자를 주는 Date.now(); 함수를 이용해서 부여한다.

const newToDoObj = {

text:newTodo,

id:Date.now(),

};

이렇게 설정하고 난 뒤 기존 text만 보내려고 하면

toDos.push(newToDo);에서 toDos.push(newToDoObj);로 수정해야한다!

Deleting To Dos part two
const todos =[{text:"lalala"}, {text:"lololo"}]

undefined

function sexyFilter(todo){ return todo.text !== "lololo"}

undefined

todos.filter(sexyFilter)

[{…}]

0: {text: 'lalala'}

length: 1

[[Prototype]]: Array(0)

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

 

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 sexyFunction(num) { return num <= 1000}

arr.filter(sexyFunction)

(4) [454, 343, 12, 405]

Deleting To Dos Part Three

이제 할일은 id가 있는 todo를 지우는 거다.

filter function이 새 array를 주는 걸 기억하는게 중요하다.

const arr = [1, 2, 3, 4]

arr.filter(item => item > 2)

(2) [3, 4]

const newArr = arr. filter(item => item > 2)

arr

(4) [1, 2, 3, 4]

newArr

(2) [3, 4]