LocalStorage vs SessionStorage 언제 무엇을 쓸까

브라우저에서 데이터를 저장할 때 가장 많이 사용하는 두 가지 방법이 localStorage와 sessionStorage입니다. 이름이 비슷해서 헷갈리기 쉽지만, 용도와 생명주기가 명확히 다릅니다. 이번 글에서 두 가지의 차이와 올바른 사용법을 정리해봅니다.

웹 스토리지 API

두 스토리지 모두 Web Storage API의 일부입니다. 쿠키와 달리 서버로 자동 전송되지 않고, 순수하게 브라우저 측 저장소로만 동작합니다. 공통 메서드도 동일합니다.

// 저장
storage.setItem('key', 'value');

// 읽기
const val = storage.getItem('key');

// 삭제
storage.removeItem('key');

// 전체 초기화
storage.clear();

객체나 배열은 문자열로만 저장되므로 JSON.stringify / JSON.parse를 사용해야 합니다.

// 객체 저장
localStorage.setItem('user', JSON.stringify({ name: '홍길동', age: 30 }));

// 객체 읽기
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // '홍길동'

핵심 차이: 생명주기

항목	localStorage	sessionStorage
데이터 유지	브라우저를 닫아도 유지	탭/창을 닫으면 삭제
범위	같은 출처(origin) 전체	같은 탭(세션)으로 한정
용량	약 5~10MB	약 5MB
공유	같은 출처 탭 간 공유	탭 간 공유 안 됨

localStorage — 영구 저장

사용자가 명시적으로 삭제하거나 코드로 clear()를 호출하지 않는 한 데이터가 영구히 유지됩니다. 다크모드 설정처럼 새로고침 후에도 유지되어야 하는 사용자 설정에 적합합니다.

// 다크모드 설정 저장 예시
const toggle = document.getElementById('themeToggle');

toggle.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';

  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next); // 영구 저장
});

// 페이지 로드 시 복원
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);

localStorage는 같은 출처(도메인 + 프로토콜 + 포트)의 모든 탭에서 공유됩니다. 탭 A에서 값을 바꾸면 탭 B에서도 즉시 반영됩니다 — storage 이벤트로 감지 가능합니다.

// 다른 탭의 스토리지 변경 감지
window.addEventListener('storage', (e) => {
  if (e.key === 'theme') {
    document.documentElement.setAttribute('data-theme', e.newValue);
  }
});

sessionStorage — 임시 저장

탭 또는 창을 닫으면 데이터가 자동으로 삭제됩니다. 같은 탭에서만 유효하므로 로그인 세션이나 멀티 스텝 폼의 임시 데이터에 적합합니다.

// 멀티 스텝 폼 임시 저장
function saveStep(step, data) {
  sessionStorage.setItem(`form_step_${step}`, JSON.stringify(data));
}

function loadStep(step) {
  return JSON.parse(sessionStorage.getItem(`form_step_${step}`));
}

// 1단계 저장
saveStep(1, { name: '홍길동', email: 'hong@example.com' });

// 2단계에서 불러오기
const step1 = loadStep(1);
console.log(step1.name); // '홍길동'

언제 무엇을 쓸까 — 결정 가이드

• ✅ localStorage — 다크모드, 언어 설정, 최근 검색어, 장바구니(비로그인)
• ✅ sessionStorage — 멀티 스텝 폼, 임시 필터 상태, 스크롤 위치
• ⚠️ 둘 다 — 민감한 정보(비밀번호, 토큰)는 저장하지 마세요. XSS 공격에 취약합니다. 인증 토큰은 HttpOnly 쿠키를 사용하세요.