[React] localStorage

페이지를 새로고침하면 이전에 있던 데이터들이 날라가게 된다.

이를 방지하기 위해 localStorage를 활용할 수 있다

localStroage

• 브라우저 내에 키-값 쌍의 형태로 저장되는 객체
• 오리진(domain/port/protocol)이 같은 경우 데이터는 모든 탭과 창에서 공유
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않음
• 키와 값은 반드시 문자열

vs 쿠키

• 서버로 전송되지 않음
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
• origin에 의존 → 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없음

제공하는 메서드와 프로퍼티

• setItem(key, value) – 키-값 쌍 보관

localStorage.setItem('test', 1);

• getItem(key) – 키에 해당하는 값 가져옴

alert( localStorage.getItem('test') ); // 1

• removeItem(key) – 키와 해당 값 삭제
• clear() – 모든 것을 삭제.
• key(index) – 인덱스(index)에 해당하는 키 가져옴
• length – 저장된 항목의 개수.

키 순회하기

localStorage 객체 자체는 iterable하지 않지만, 배열처럼 다룰 순 있다

ex) 일반 for문

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

※ for ~ in

이 경우에는 hasOwnProperty()를 써야 setItem, getItem 등의 불필요한 내장 필드까지 가져오는 걸 방지할 수 있다

for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue; // setItem, getItem 등의 키 패스
  }
  alert(`${key}: ${localStorage.getItem(key)}`);
}

객체를 저장하려면

JSON 문자열로 변환하여 저장

localStorage.setItem('user', JSON.stringify({name: "John"}));

let user = JSON.parse(localStorage.getItem('user'));
alert( user.name ); // John