LocalStorage
localStrage는 웹 스토리지 객체로, 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
이는 페이지를 새로고침하거나 브라우저를 닫아도 사라지지 않는다.
개발자도구에서 Application탭에 들어가보면 Local storage가 보이는데 안에 들어있는 값을 확인해볼 수 있다.
localStorage 사용법
아래와 같은 기능들이 있다.
- setItem(key, value) – 키-값 쌍을 보관합니다.
- getItem(key) – 키에 해당하는 값을 받아옵니다.
- removeItem(key) – 키와 해당 값을 삭제합니다.
- clear() – 모든 것을 삭제합니다.
- key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
- length – 저장된 항목의 개수를 얻습니다.
키,값 쌍을 가진 데이터를 저장하고 불러오는 방법을 알아보자.
localStorage.setItem('test', 1);
위는 key가 test이고 value가 1인 데이터를 localStorage에 저장하는 예시이다.
불러올 땐 key를 활용해서 불러온다.
alert( localStorage.getItem('test') ); // 1
위는 key값인 test를 가지고 value인 1을 띄워주는 예시이다.
JSON을 활용한 객체 저장하기
localStorage는 문자열만 저장된다.
하지만 json을 사용하면 json형태의 객체로 localStorage에 저장할 수 있다.
예시를 통해 알아보자.
let data = { name: "홍길동", age: 30, } localStorage.setItem("홍길동", JSON.stringify(data));
위처럼 코드를 작성해주면 data에 있는 name과 age가 모두 localStorage에 저장된다.
JSON.stringify를 사용해 object -> string으로 변환해준다.
그럼 위처럼 저장된 "홍길동"을 getItem으로 불러내보자.
let gildong = JSON.parse(localStorage.getItem("홍길동")); console.log(gildong); // {name: "홍길동", age: 30} console.log(gildong.name); // 홍길동
getItem으로 데이터를 불러오고 JSON.parse를 사용해 string -> object로 변환해준다.
마치며.. (문제 및 해결)
localstorage를 사용해 영화 리뷰를 저장하는 로직을 만들어야했는데,
영화별로 localstorage에 저장하려면 이를 구분해야 한다는게 관건이었다.
localstorage를 배열처럼 사용해보기로 했다.
localstorage에 json형태의 데이터를 저장하는데,
백틱을 활용해서 영화 id와 count를 세서 영화 id별 리뷰를 구분짓도록 작성했다.
그런데, 삭제에서 문제가 생겼다.
count를 올려가면서 localstorage가 null이면 리뷰를 추가하도록 만들어 주었더니,
중간에 있는 review를 삭제하면 count의 중간에 구멍이 생겨버리는 것이다.
(ex. 200review1, 200review2, 200review3이 있으면 2가 사라져 구멍이 생김)
그래서 진짜 배열을 활용해서 기존 리뷰들을 배열에 넣어주고,
삭제해줄 데이터를 localstorage에서 삭제함과 동시에 같은 인덱스의 배열에 있는 동일한 값도 같이 삭제해주면서(splice 사용),
남아있는 리뷰배열을 순차적으로 localstorage에 setitem해주어
삭제된 지점부터 count번호가 한 칸씩 앞당겨지도록 만들어주었다.
해결된 것은 뿌듯하나 더 효율적인 방법은 없는지, 이게 최선인지 고민이 생긴다.
