HTML5의 로컬 스토리지(localStorage)는 브라우저에 데이터를 영구적으로 저장할 수 있는 편리한 기능이지만, 무제한으로 사용할 수 있는 것은 아닙니다. 저장 용량에는 명확한 크기 제한이 존재합니다.
로컬 스토리지의 기본 크기 제한
일반적으로 로컬 스토리지의 표준 용량 제한은 도메인(정확히는 오리진, origin)당 5MB 또는 10MB입니다. HTML5 표준 명세에서는 오리진당 5MB를 권장하고 있습니다.
하위 도메인을 이용한 우회 시도에 대한 경고
흥미로운 점은, HTML5 명세에서는 사이트가 자신의 오리진과 연관된 다른 하위 도메인들을 활용해 저장 한도를 우회하는 행위를 경계하도록 권고하고 있다는 것입니다. 예를 들어 하나의 도메인만 사용하면 제한에 걸리지만, 여러 개의 하위 도메인을 나누어 각각 최대치까지 데이터를 저장하면 전체 저장 용량을 사실상 늘릴 수 있기 때문입니다.
명세에는 다음과 같이 명시되어 있습니다.
User agents should guard against sites storing data under their origin's other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, a3.example.com, etc, circumventing the main example.com storage limit. (사용자 에이전트는 a1.example.com, a2.example.com, a3.example.com 등 연관된 하위 도메인들에 한도까지 데이터를 저장함으로써 메인 example.com의 저장소 제한을 우회하는 행위를 방지해야 한다.)
오리진당 5MB 제한의 근거
그렇다면 왜 하필 5MB일까요? 명세에서는 이 수치가 엄격하게 계산된 값이라기보다는 임의로 정해진 합리적인 기준(arbitrary limit)임을 밝히고 있습니다. 실제 구현 환경에서 얻은 피드백을 바탕으로 향후 이 권장 값이 조정될 수 있다고 설명합니다.
A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future. (오리진당 5MB라는 대체로 임의적인 제한이 제안된다. 구현 관련 피드백은 환영하며, 향후 이 제안을 갱신하는 데 활용될 것이다.)
개발자가 알아두면 좋은 점
- 오리진 단위 적용: 크기 제한은 프로토콜, 호스트, 포트가 모두 일치하는 오리진 단위로 적용됩니다. 따라서 같은 상위 도메인이라도 서브도메인이 다르면 별도의 저장 공간을 가질 수 있습니다.
- 용량 초과 시 동작: 할당량을 초과하여
setItem()을 호출하면QuotaExceededError예외가 발생하므로, try-catch 처리를 통해 안전하게 대응하는 것이 좋습니다. - 더 많은 용량이 필요하다면: 대용량 데이터나 구조화된 데이터를 다루려면 IndexedDB를 고려하는 것이 바람직합니다. IndexedDB는 일반적으로 훨씬 큰 저장 공간을 제공합니다.
결론적으로, HTML5 로컬 스토리지는 오리진당 약 5MB(구현에 따라 10MB)의 제한을 가지며, 하위 도메인을 분산 활용해 한도를 우회하는 방식은 표준 명세에서 지양하는 패턴입니다. 웹 애플리케이션을 설계할 때는 이러한 저장 용량 제한을 미리 고려하는 것이 중요합니다.