웹 스토리지

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);
});