본문 바로가기
프론트엔드/JS 공부

스토리지(Storage)

by 학습하는 청년 2024. 5. 1.

최종 수정 : 2024-05-01

세션 스토리지와 로컬 스토리지

사이트마다 클라이언트에서만 사용하고 싶은 데이터를 저장해 놓고 싶을 때 사용한다.

 

세션 스토리지(Session Storage)

  • 현재 탭에서만 유요한 저장소이다.
  • 탭을 닫으면 데이터가 사라진다.
  • 다른 탭과 데이터는 공유되지 않는다.
// 값을 저장
const data = inputElement.value;
sessionStorage.setItem('draft', data);

// 값을 참조하여 사용
const draftData = sessionStorage.getItem('draft');

// 값 지우기
sessionStorage.removeItem('draft');

로컬 스토리지(Local Storage)

  • 해당 사이트에서 유요한 저장소이다.
  • 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.
  • 여러 탭 사이에서도 데이터가 공유된다.
// 값을 저장 및 수정
localStorage.setItem('shomw-sidebar', 'false');

// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';

// 값 지우기
localStorage.removeItem('show-sidebar');

 

스토리지가 변경됐을 때 처리하기

스토리지가 변경되었을 때, 'storage'라는 이벤트가 발생한다.

window.addEventListener("storage", () => {
  const showShidebar = localStorage.getitem('show-sidebar') === 'true';
    // showSidebar 값 적용
});

스토리지가 쿠키와 다른 점은?

  • 클라이언트가 만들고 관리한다.
  • 자바스크립트로 편리하게 조작할 수 있다.
  • 만료 기간(수명)이 없다.
  • 쿠키보다 사용할 수 있는 용량이 크다.

공부할 자료

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

https://web.dev/i18n/ko/storage-for-the-web/

https://ko.javascript.info/localstorage

댓글