웹 스토리지

홍준섭·2023년 2월 22일

개발 공부

목록 보기
14/20

sessionStorage

세션 기간 동안(페이지 다시 로드 및 복원을 포함하여 브라우저가 열려 있는 동안) 사용 가능한 각 원본에 대해 별도의 저장 영역을 유지한다.

  • 세션 동안만 데이터를 저장. 즉 브라우저가 닫힐 때까지 데이터가 저장
  • 데이터는 서버로 전송되지 않는다.
  • 저장 한도는 쿠키보다 크다(최대 5MB)

localStorage

동일한 작업을 수행하지만 브라우저를 닫았다가 다시 열어도 지속된다

  • 만료 날짜 없이 데이터를 저장하고 JavaScript를 통해서만 지워지거나 브라우저 캐시/로컬 저장 데이터를 지워야 한다
  • 저장 한도는 둘 중 최대이다.

웹 저장소 API 사용

  • 키와 값은 항상 문자열이다(객체와 마찬가지로 정수 키는 자동으로 문자열로 변환됨).
  • Storage.getItem() 및 Storage.setItem()을 사용하여 값에 액세스할 수 있다.
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

데이터 레코드 삭제

  • Storage.removeItem() 단일 인수(제거하려는 데이터 항목의 키)를 받아 해당 도메인의 스토리지 개체에서 제거한다
  • Storage.clear() 인수를 사용하지 않고 해당 도메인의 전체 저장소 개체를 비운다

StorageEvent로 스토리지 변경에 응답

window.addEventListener('storage', (e) => {
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});
profile
개발 공부중입니다

0개의 댓글