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

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

쿠키는 서버에서 만들고 클라이언트는 거의 건드리지 않는다. 그런데 사이트에 따라서 클라이언트에서만 사용하는 데이터인데 저장해놓고 사용하고 싶은 경우가 있다. 이런 목적으로 나온 것이 세션 스토리지와 로컬 스토리지이다.

세션 스토리지

• 현재 탭에서만 유용한 저장소이다.

• 탭을 닫으면 데이터가 사라진다.

• 다른 탭과 데이터는 공유되지 않는다.

  현재 탭의 인풋의 값을 저장하고 참조하는 코드는 다음과 같다.

// 값을 저장하는 코드. (이미 값이 있다면) 수정하는 코드
const data = inputElement.value;
sessionStorage.setItem('draft', data);

// 값을 참조해서 사용할 때
const draftData = sessionStorage.getItem('draft');

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

로컬 스토리지

• 해당 사이트에서 유효한 저장소이다.
• 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.
• 여러 탭 사이에서도 데이터가 공유된다.

예를 들어 사이트의 사이드 바 보이기/감추기 정보를 저장하고 참조하는 코드는 다음과 같다.
(문자열 형태로 저장하고 문자열을 원하는 데이터 타입으로 바꿔야 한다.)

// 사용자가 사이드바 감추기 버튼을 클릭했을 때
// 값을 저장, 수정
localStorage.setItem('show-sidebar', 'false');

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

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

쿠키와 세션, 로컬 스토리지의 다른 점

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

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

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

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

Window: storage event - Web APIs | MDN

활용 사례

• 초안 임시 저장하기
  로컬 스토리지를 사용해 구현할 수 있다.
  실제로는 로컬 스토리지와 유사하지만 좀 더 데이터베이스처럼 쓸 수 있는 IndexedDB로 구현되어 있다. IndexedDB

• 웹 앱
  웹 기반으로 만들어진 프로그램들은 세션, 로컬 스토리지를 적극적으로 사용한다.