localstoage

li element를 DOM으로 만들어 input value를 하나하나 추가해나가는 경우, 

새로고침을 하고나면 li 들이 전부 다 사라져버린다. 이 경우 어떻게 우리가 생성한 정보들을 저장하고 불러올 수 있을까??

 

바로 localstorage에 담아두면 된다. js 리스트에 정보를 담아 두었는데 리스트 째로 localstorage에 저장할 수 있을까?

저장은 된다. 하지만 온전히 list형태로 저장이 되지 않는다. localstorage는 string format만 지원한다고 하기에 list의 내용물을 빼서  stirng으로 만들어버린다. 따라서 getItem으로 불러왔을 때는 string으로 읽혀온다.

 

그럼 어떻게 list형태로 보내고 다시 list형태로 받을 수 있을까?

 

JSON을 활용하면 된다.

list = ['하이','헬로우']

localStroage.setItem('list',list)

localStorage.getItem('list')

>>> '하이,헬로우'  ( type : string )

위처럼 그냥 배열의 형태를 없애고 내용물 전체를 스트링으로 만들어버린다.

 

list = ['하이','헬로우']

localStroage.setItem('list',JSON.stringify(list))

localStorage.getItem('list')

>>>'['하이','헬로우']' ( type : string )

JSON을 활용하면 배열 자체를 스트링으로 만들어버린다.

 

이게 무슨 차이냐고 할 수 있지만 JSON.stringify로 만들어둔 객체는 

JSON.parse(localStorage.getItem('todo'))하였을 때 저장했던 배열이 그대로 살아서 반환이된다.

 

하지만 stringify를 하지 않았을 경우 JSON.parse(localStorage.getItem('todo'))를 해주면 

에러가 발생한다.