세션 스토리지

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

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

---

2. 세션 스토리지

• 현재 탭에서만 유요한 저장소이다.
• 탭을 닫으면 데이터가 사라진다.
• 다른 탭과 데이터는 공유되지 않는다.

예를 들어 현재 탭의 인풋의 값을 저장하고 참조하는 코드이다. 참고조 저장하는 데이터의 타입은 문자열이다.

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

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

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

---

3. 로컬 스토리지

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

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

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

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

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

---

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

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

---

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

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

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

Window : storage event - Web APIs | MDN

---

6. 참고하면 좋은 자료

Web Storage API - Web API | MDN
웹용 스토리지
localStorage와 sessionStorage