JS Localstoreage의 용량은 얼마인가요?

JS localStorage 용량: 5MB 제한 및 브라우저별 차이

웹 개발 시 사용하는 JS localStorage 용량은 데이터를 효율적으로 관리하는 데 중요한 기준입니다. 이 저장 공간의 한계를 정확히 이해하면 웹 애플리케이션 개발 과정에서 발생할 수 있는 데이터 초과 오류를 예방하고 사용자의 브라우저 환경에 최적화된 데이터 저장 전략을 수립할 수 있습니다.

JS localStorage 용량은 얼마인가요?

JavaScript의 localStorage 용량은 일반적으로 웹사이트(도메인)당 약 5MB로 제한되어 있습니다. 대^[1] 부분의 최신 브라우저가 이 기준을 따르지만, 실제로는 브라우저 종류나 사용자의 환경 설정에 따라 5MB에서 최대 10MB까지 지원하기도 합니다. ^[2]

이 한도는 생각보다 빨리 도달할 수 있습니다. 특히 텍스트 기반의 대용량 데이터를 다룰 때 주의가 필요하죠. 제가 처음 프로젝트를 진행할 때, 별 생각 없이 큰 JSON 객체를 그대로 저장했다가 예상치 못한 오류를 만났던 기억이 납니다. 데이터 규모를 미리 파악하는 것이 중요합니다.

localStorage 데이터 저장의 기술적 특징

localStorage를 사용할 때 반드시 기억해야 할 핵심 원칙들이 있습니다. 가장 큰 제약은 데이터가 오직 문자열(String) 형태로만 저장된다는 점입니다. 문자열 변환 필수: 객체나 배열을 저장하려면 JSON.stringify()를 통해 문자열로 변환해야 합니다. 데이터 복구: 다시 불러올 때는 JSON.parse()를 사용해 원래의 객체 구조로 되돌려야 합니다. 용량 초과 시 대응: 할당된 5MB를 넘어서는 데이터를 저장하려 하면 브라우저는 즉시 QuotaExceededError 해결이 필요한 상황을 유발합니다.

현대적인 웹 환경에서 브라우저는 데이터를 원본 그대로 담지 못합니다. 문자열로 변환하는 과정에서 데이터 크기가 약간 늘어날 수도 있다는 점을 감안해야 합니다. 실제로 5MB는 글자 수로 치면 약 500만 자 정도를 저장할 수 있는 수준이지만, 인코딩 방식에 따라 실제 가용량은 차이가 발생할 수 있습니다.

브라우저별 한도와 확인 방법

브라우저별로 정확한 수치를 제공하지 않는 경우가 많지만, 주요 브라우저들은 대부분 localStorage 5MB 제한 기준을 유지하고 있습니다. 개발자 도구를 활용하면 현재 도메인에서 사용 중인 스토리지 용량을 직접 확인할 수 있습니다.

QuotaExceededError를 피하는 전략

개발하다 보면 가끔 예외적인 상황이 발생하곤 합니다. 저장 공간이 부족하다는 QuotaExceededError를 해결하기 위한 몇 가지 현실적인 접근 방식입니다. 1. 불필요한 데이터 정리: 저장하기 전에 사용하지 않는 오래된 키를 삭제합니다. 2. 데이터 압축: 용량이 큰 문자열은 압축 알고리즘을 사용해 크기를 줄입니다. 3. 대안 기술 검토: 5MB 이상의 대용량 데이터가 필요하다면 IndexedDB와 같은 더 큰 용량의 저장소를 고려해야 합니다.

현장에서 실무자들은 보통 1MB가 넘는 데이터를 localStorage에 직접 넣는 것을 지양합니다. 그 대신, 핵심 식별자만 저장하고 실제 큰 데이터는 서버에서 가져오거나 IndexedDB를 활용하는 패턴을 선호합니다. 저도 처음엔 localStorage 데이터 저장 크기가 만능인 줄 알았지만, 실제 프로덕션 환경에서는 관리하기가 까다롭더군요.

웹 저장소 기술 비교

프로젝트 요구사항에 따라 가장 적합한 저장 방식을 선택해야 합니다.

localStorage

사용자가 삭제 전까지 영구적

약 5MB 내외

sessionStorage

브라우저 탭 종료 시까지

약 5MB 내외

IndexedDB

영구적 (대용량 가능)

수백 MB 이상 (환경에 따라 다름)

이커머스 사이트의 로컬 저장 최적화

민수는 전자상거래 사이트를 개발하던 중, 사용자가 장바구니에 담은 50개의 상품 데이터를 localStorage에 저장했습니다. 처음에는 잘 작동했지만, 상품 정보가 복잡해지자 며칠 지나지 않아 저장 용량 부족 에러가 발생했습니다.

사용자들은 장바구니를 클릭할 때마다 에러가 났고, 민수는 처음엔 네트워크 문제라고 생각했습니다. 하지만 브라우저 콘솔을 확인하고 나서야 localStorage가 가득 찼다는 사실을 깨달았습니다.

그는 상품 상세 정보 전체를 저장하는 대신, 상품 ID와 수량만 저장하도록 구조를 바꿨습니다. 실제 상품 상세 정보는 필요할 때 서버 API를 호출해 가져오도록 로직을 수정했죠.

결과적으로 저장소 사용량을 90% 가까이 줄였고, 이후로 용량 오류는 사라졌습니다. 이 경험을 통해 데이터 저장의 최소화가 얼마나 중요한지 다시금 깨달았습니다.