localStorage와 sessionStorage 비교

웹 저장소 기능은 클라이언트 측에서 사용하는 두 가지 키-값 저장소를 제공합니다. localStorage는 세션 간에도 유지되고 sessionStorage는 탭이 닫힐 때 삭제됩니다. 두 저장소 모두 문자열 값을 저장하며, 동일 출처의 JavaScript에서 동기적으로 접근할 수 있습니다.

localStorage의 데이터는 코드나 사용자에 의해 명시적으로 삭제되거나 브라우저 데이터가 삭제될 때까지 유지됩니다. 브라우저를 다시 시작하거나 페이지를 새로 고치거나 탭을 닫아도 유지됩니다. 용량은 브라우저에 따라 출처당 일반적으로 5~10MB입니다.

sessionStorage는 현재 브라우저 탭과 세션에 한정됩니다. 같은 탭에서 페이지를 새로 고쳐도 데이터는 유지되지만 탭을 닫으면 삭제됩니다. 같은 사이트를 연 두 탭은 서로 분리된 독립적인 sessionStorage를 사용하므로 데이터를 공유하지 않습니다.

두 저장소는 동일한 기능 구성을 공유합니다: setItem(key, value), getItem(key), removeItem(key), clear() 및 length 속성입니다. localStorage를 sessionStorage로, 또는 그 반대로 바꾸기만 하면 같은 코드가 두 저장소 모두에서 작동합니다.

다음에는 localStorage를 사용하십시오: 사용자 환경 설정(테마, 언어), 캐시된 API 응답, 로그인 상태 기억 기능. 다음에는 sessionStorage를 사용하십시오: 마법사나 양식 단계 상태, 결제 전 임시 장바구니, 개인정보 보호를 위해 방문 간에 유지되지 않아야 하는 데이터.

두 저장소는 출처(프로토콜 + 호스트 + 포트)를 기준으로 엄격하게 분리됩니다. https://example.com은 http://example.com에서 설정한 localStorage를 읽을 수 없습니다. 이는 보안 경계이며, document.domain을 조작하지 않는 한 하위 도메인도 서로 다른 출처로 취급됩니다(현재는 사용 중단됨).

대부분의 브라우저에서 두 저장소의 한도는 출처당 약 5MB입니다. 한도를 초과하면 QuotaExceededError가 발생합니다. 대용량 데이터 저장이 필요하다면 구조화된 데이터를 기가바이트 단위로 지원하는 IndexedDB를 사용해야 합니다. 웹 저장소는 작은 키-값 쌍을 위한 것이며, 이진 데이터나 대규모 데이터 집합을 위한 것이 아닙니다.

웹 저장소의 읽기와 쓰기는 동기적으로 실행되어 주 스레드를 차단합니다. 대용량 데이터를 읽거나 쓰면 화면 끊김이 발생할 수 있습니다. 대규모 데이터를 자주 처리해야 한다면 IndexedDB를 우선 사용하십시오. 성능 문제를 피하려면 웹 저장소의 값을 작게 유지하고 드물게 사용하십시오.

웹 저장소는 문자열만 저장합니다. JSON.stringify()로 객체를 직렬화하고 JSON.parse()로 역직렬화하십시오. parse 실패를 처리하십시오: try { return JSON.parse(stored) } catch { return defaultValue }. 저장소에 있는 손상된 값이나 JSON이 아닌 값은 parse 오류를 발생시킵니다.

비공개 또는 시크릿 모드의 localStorage는 모든 비공개 창을 닫을 때 삭제되므로 sessionStorage처럼 동작합니다. 인증 상태를 localStorage에 의존하는 코드는 localStorage가 예기치 않게 삭제되는 상황을 처리해야 합니다.

브라우저는 제3자 저장소에 대한 접근을 점점 더 제한하고 있습니다. 자사 사이트에 삽입된 제3자 사이트의 인라인 프레임은 해당 제3자 사이트의 localStorage에 접근할 수 없습니다. Safari의 ITP와 Firefox의 향상된 추적 방지 기능은 저장소를 분리하므로, 자사 사이트에서의 사용에는 영향을 주지 않습니다.

sessionStorage는 언제 삭제됩니까?

localStorage는 프로그램이나 사용자에 의해 삭제될 때까지 계속 유지되고, sessionStorage는 탭을 닫을 때 삭제됩니다. 두 저장소 모두 출처별로 분리된 동기식 문자열 키-값 저장소이며 용량은 약 5MB입니다. 환경 설정과 지속적인 상태에는 localStorage를 사용하고, 탭을 닫아도 유지되지 않아야 하는 임시 세션 범위 상태에는 sessionStorage를 사용하십시오.