sessionStorage, IndexedDB와 적절한 API 선택하기

sessionStorage는 localStorage와 정확히 같은 메서드를 제공하지만 수명은 탭에 종속됩니다. 탭이나 창을 닫으면 해당 데이터가 자동으로 삭제됩니다.

또한 탭별로 격리되므로 두 탭이 sessionStorage 데이터를 공유하지 않습니다.

sessionStorage는 세션 동안 새로 고침 후에도 진행 상황을 유지하고 탭이 닫히면 삭제하려는 다단계 진행 양식에 적합합니다.

사용자는 양식 작성 중간에 새로 고침해도 입력 내용을 잃지 않지만, 완료하거나 떠난 후에는 아무것도 남지 않습니다.

IndexedDB는 브라우저에 내장된 비동기 트랜잭션 데이터베이스입니다. localStorage의 5MB 제한보다 훨씬 많은 데이터를 저장할 수 있으며 구조화된 객체, 배열, 심지어 이진 데이터도 처리합니다.

비동기식이므로 localStorage와 달리 메인 스레드를 차단하지 않습니다.

기본 IndexedDB 인터페이스는 장황하고 이벤트 기반이므로 idb-keyval과 같은 라이브러리는 이를 get, set, del과 같은 간단한 프로미스 기반 함수로 감쌉니다.

이를 통해 IndexedDB의 용량과 비동기 동작을 유지하면서 localStorage와 비슷한 편의성을 얻을 수 있습니다.

IndexedDB는 Blob 및 ArrayBuffer 값을 저장할 수 있으므로 이미지, 오디오, 다운로드한 파일 또는 오프라인 자산을 캐시하는 데 적합합니다.

이러한 데이터는 localStorage 제한을 빠르게 초과하며 문자열로 변환해야 하지만, IndexedDB를 사용하면 그럴 필요가 없습니다.

서비스 워커와 함께 자주 사용하는 Cache 인터페이스는 요청을 키로 삼아 전체 HTTP Response 객체를 저장합니다. 네트워크 응답을 오프라인 우선 방식으로 캐시하기 위한 목적에 맞게 설계되었습니다.

오프라인일 때 네트워크에 접속하지 않고 자산과 애플리케이션 프로그래밍 인터페이스 응답을 제공하는 데 사용하십시오.

localStorage는 삭제할 때까지 영구적으로 유지되고, sessionStorage는 탭 세션 동안만 유지되며, IndexedDB는 영구적으로 유지됩니다. 쿠키는 해당 속성을 통해 만료 기간을 설정할 수 있습니다.

필요한 유지 기간에 맞는 저장소를 선택하면 데이터가 언제 사라지는지에 대한 예기치 않은 상황을 피할 수 있습니다.

localStorage와 sessionStorage는 약 5MB로 제한되고 쿠키는 각각 약 4KB로 제한되는 반면, IndexedDB는 기기와 브라우저에 따라 수백 MB 이상을 사용할 수 있습니다.

상당한 크기의 데이터에는 IndexedDB가 브라우저에서 실용적으로 사용할 수 있는 유일한 선택지입니다.

localStorage, sessionStorage, 쿠키는 동기식이므로 접근하는 동안 주 스레드를 차단합니다. IndexedDB와 Cache API는 비동기식이며 프라미스 기반입니다.

비동기 접근을 사용하면 더 많은 양의 데이터를 읽거나 쓸 때도 사용자 인터페이스가 반응성을 유지합니다.

스크립트가 인증 토큰을 읽을 수 없도록 인증 토큰에는 httpOnly 쿠키를 사용하고, 작고 지속적으로 유지할 환경설정에는 localStorage를 사용하십시오. 대용량 파일과 복잡한 오프라인 데이터에는 IndexedDB를, 탭 안에서 잠시 보관할 초안에는 sessionStorage를 사용하십시오.

저장소를 데이터의 민감도, 크기, 수명에 맞추십시오.

하나의 저장 API가 모든 상황에서 가장 좋은 것은 아닙니다. 각 API는 용량, 지속성, 동기화 동작, 보안 측면에서 서로 다른 절충점을 가집니다. 이러한 차이를 알면 의도적으로 선택할 수 있습니다.

일반적인 앱은 여러 저장소를 사용합니다. 인증에는 쿠키를, 환경설정에는 localStorage를, 오프라인 리소스에는 IndexedDB를 사용합니다.

저장소 선택에 대한 이해도를 확인해 보십시오.

sessionStorage, localStorage, IndexedDB, 쿠키, Cache API를 지속성, 용량, 동기화 동작, 보안 측면에서 비교했습니다.

사용 사례에 따라 선택하는 방법을 배웠습니다. 인증에는 쿠키를, 작은 환경설정에는 localStorage를, 크거나 복잡한 데이터에는 IndexedDB를, 탭 범위의 초안에는 sessionStorage를 사용합니다.