[React] localStorage

Haeseo Lee·2023년 4월 7일
0

React

목록 보기
6/16
post-thumbnail
post-custom-banner

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

이를 방지하기 위해 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
profile
잡생각 많은 인간
post-custom-banner

0개의 댓글