localStorage, sessionStorage, IndexedDB의 차이를 설명해주세요.

localStorage는 지속 저장, sessionStorage는 탭 세션 저장, IndexedDB는 대용량 구조화 데이터를 비동기로 저장합니다. 민감 정보 저장에는 신중해야 합니다.

핵심 개념

핵심 기준은 수명, 용량, 동기/비동기 API입니다.

localStorage와 sessionStorage는 문자열 key-value 저장소입니다. API가 단순하지만 동기적으로 동작해 큰 데이터를 다루면 메인 스레드를 막을 수 있습니다. IndexedDB는 비동기 API, 객체 저장소, 인덱스, 트랜잭션을 제공해 오프라인 데이터나 대용량 캐시에 적합합니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

localStorage.setItem('theme', 'dark');

const request = indexedDB.open('app-cache', 1);
request.onupgradeneeded = () => {
  request.result.createObjectStore('articles', { keyPath: 'id' });
};

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

함께 연결해서 보면 좋은 키워드

Storage, localStorage, sessionStorage, IndexedDB

정리

한 줄로 정리하면, localStorage는 지속 저장, sessionStorage는 탭 세션 저장, IndexedDB는 대용량 구조화 데이터를 비동기로 저장합니다. 민감 정보 저장에는 신중해야 합니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.