localStorage와 sessionStorage의 수명 차이

저장 대상

테마, 최근 검색어, 임시 UI 옵션처럼 유출 위험이 낮은 값을 고른다.

객체는 JSON.stringify로 문자열화하고 읽을 때 parse한다.

탭 단위 임시값은 sessionStorage, 재방문 유지값은 localStorage에 둔다.

다른 탭에서 localStorage가 바뀌면 storage 이벤트로 화면 상태를 맞춘다.

localStorage

장기 저장 브라우저를 닫아도 남는 사용자 설정

직접 삭제 전까지 유지

sessionStorage

탭 단위 저장 새 탭과 공유되지 않는 임시 상태

탭 종료 시 제거

서버 전송 가능 요청마다 자동 전송될 수 있음

작은 인증 식별자에 적합

IndexedDB

큰 구조화 데이터 오프라인 데이터, 파일, 대량 캐시에 적합

비동기 API

민감 정보 토큰, 비밀번호, 개인정보를 Web Storage에 저장하지 않는다.

용량 저장 실패 예외와 브라우저 제한을 처리한다.

동기 API 큰 값을 자주 읽고 쓰지 않는다.

초기값 parse 실패나 없는 key에 대한 기본값이 있다.