01 · Concept

Web Storage

Web Storage API는 브라우저에 키-값 쌍을 저장하는 메커니즘을 제공합니다. localStorage, sessionStorage, IndexedDB를 비교합니다.

localStorage는 영구 저장, sessionStorage는 세션(탭) 단위 저장을 제공합니다. 둘 다 동기적이며 문자열만 저장 가능합니다. IndexedDB는 비동기적으로 대용량 구조화 데이터를 저장할 수 있는 로우레벨 API입니다. 용도와 데이터 특성에 따라 적절한 스토리지를 선택해야 합니다.

02 · Interactive Demo

Storage CRUD 시뮬레이션

각 스토리지에 데이터를 저장, 조회, 삭제하며 동작 차이를 확인하세요.

저장된 데이터 (0개)
비어 있음
Storage 비교
특성localStoragesessionStorageIndexedDB
수명영구 (수동 삭제)탭 종료 시 삭제영구 (수동 삭제)
용량~5–10 MB~5–10 MB수백 MB+
데이터 형식문자열만문자열만구조화된 객체
API 방식동기동기비동기
접근 범위같은 출처 전체같은 탭만같은 출처 전체
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 저장
localStorage.setItem('user', JSON.stringify({
  name: '김개발',
  theme: 'dark'
}));

// 조회
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // '김개발'

// 수정
user.theme = 'light';
localStorage.setItem('user', JSON.stringify(user));

// 삭제
localStorage.removeItem('user');

// 전체 삭제
localStorage.clear();

// 저장된 항목 수
console.log(localStorage.length);

// 키 순회
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}
04 · Interview Point

면접 핵심 질문

수명: localStorage는 명시적으로 삭제하지 않는 한 영구적으로 유지되고, sessionStorage는 탭/세션 종료 시 자동 삭제됩니다.
공유 범위: localStorage는 같은 출처(origin)의 모든 탭에서 공유되고, sessionStorage는 해당 탭에서만 접근 가능합니다.
공통점: 둘 다 동기 API이며, 문자열만 저장 가능하고, 약 5~10MB의 용량 제한이 있습니다.
localStorage와 sessionStorage는 브라우저별로 약 5~10MB의 용량 제한이 있습니다. 초과 시 QuotaExceededError 예외가 발생합니다. IndexedDB는 수백 MB에서 디스크 공간의 일정 비율까지 사용 가능합니다. 대용량 데이터가 필요하면 IndexedDB를, 간단한 키-값은 localStorage를 사용하는 것이 적합합니다.
1. XSS 취약점 — JavaScript로 직접 접근 가능하므로 XSS 공격 시 모든 데이터가 노출됩니다. 민감한 데이터(토큰, 비밀번호)는 저장하지 않아야 합니다.
2. 동일 출처 정책 — 같은 origin에서만 접근 가능하지만, 서브도메인 간 공유는 불가합니다.
3. 암호화 없음 — 평문으로 저장되므로 개발자 도구에서 누구나 읽을 수 있습니다.
4. 대안 — 인증 토큰은 HttpOnly 쿠키에 저장하는 것이 더 안전합니다.