#7.4 Loading To Dos part One

HeeDong-log·2023년 5월 15일
0
  1. To-Do-List 작성시 localStorage 에 저장이 된다.

  2. 근데 저장이 될때 string data type 으로 저장이 된다. (예: "[a,b,c,d,e]")

  3. 그래서 JSON.parse()를 통해 string data type을 object로 바꾼꾼다. 근데 이 Object는 Array 같이 바뀌었다. 즉 index를 통해 value를 access할수 있다.
    예: "[a,b,c,d]" (string) => a, b, c, d;
    array[0] = a; array[1] = b; array[2] = c; array[3] = d

  4. array 형태가 된 값을 parsedToDos 라는 const variable 에다가 넣어놨다.

  5. 이 상태에서 parsedToDos 는 array 형태라고 가정했을때 .foreach() 라는 function 을 사용할수 있는데 이건 mdn 웹사이트 가면 나오지만 그냥 단순히 array 에 들어있는 모든 값을 iterate (순찰(?)) 할수 있는 function 이다.

  6. 즉 index 0 부터 마지막 index 까지 한바뀌 도는건데 돌면서 그 값들을 item 라는 곳 또는 element에 (이름은 정하기 나름) 저장이 되는것이다.
    ex)
    Array = [ a, b, c, d]
    Array.foreach( (item) => console.log(item))
    // output:
    a
    b
    c
    d

localStorage 와 JSON.stringify의 차이점

const todo = ["hi","hello"]
localStorage.setItem('todo',todo)
localStorage.getItem('todo')

'hi,hello' ( 기존 리스트 형식 없애고 내용물만 string화 시킴)

localStorage.setItem('todo',JSON.stringify(todo))
localStorage.getItem('todo')

'["hi","hello"]' (리스트 째로 string화 시켜줌)

JSON.stringify로 넘겨준 자료는 JSON.parse로 받아와서 이전 모습 그대로 소생? 시킬 수 있지만 그냥 넘겨준 자료(localStorage.setItem('todo',todo)는 JSON.parse로 받아오지 못한다. 오류가 난다.

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

위와 아래는 같은 행동을 한다.(화살표 함수 사용)

parsedToDos.forEach((item) => console.log("this is the turn of ", item));

profile
포기하지 않는 코딩 생활-!

0개의 댓글