LocalStorage
이번 개인과제에서 영화를 검색하고 즐겨찾기에 추가하는 기능을 만들어야하는데 이때 붙은 조건중 하나가 페이지를 빠져나왔다가 다시 들어가도 즐겨찾기에 추가한 영화들이 남아있어야 한다는 조건이 붙어있었습니다. 옆에 LocalStorage를 이용하라고 나와있었기 때문에 먼저 LocalStorage를 알아보겠습니다.
LocalStorage??
로컬 스토리지는 말그대로 지역 저장소 즉 HTML5에서 지원하는 기능으로 브라우저에 존재하는 저장소를 뜻한다. 로컬 스토리지는 읽기 전용 속성을 사용하면 Document 출처의 스토리지 객체에 접근할 수가 있습니다. 저장된 제이터는 브라우저 세션간에 공유가 되기때문에 이 부분에 즐겨찾기된 데이터들을 저장한다면 페이지가 바뀌어도 데이터를 남겨둘수 있습니다.
// key : 'accessToken' || Value: 'value'
localStorage.setItem('accessToken', 'value')
// key값이 'accessToken'인 값을 가져오기
const data = localStorage.getItem('accessToken')
// key값이 'accessToken'인 값을 제거하기
localStorage.removeItem('accessToken')
// 초기화
localStorage.clear()위에서 보이는 key값과 value값은 모두 string이라는것을 명심해야 합니다.
따라서 로컬 스토리지에 객체형태를 저장하고 싶다면 내용을 'JSON.stringify()'를 통해 JSON형태로 변환해주어야 하고 데이터를 받아올때에는 'JSON.parse()'를 통해 원래의 데이터 모양으로 되돌려 주어야 합니다.
