HTML5에는 사용자의 브라우저에 대량의 데이터를 로컬로 저장할 수 있는 여러 저장소 API가 도입되었습니다. 하지만 각 앱에 할당되는 공간은 기본적으로 몇 MB로 제한됩니다. Chrome에서는 이전 한도인 5MB보다 더 큰 저장용량을 요청할 수 있습니다.
이 문서에서는 Chrome에서 사용되는 스토리지 유형에 관한 기본 개념을 소개하고 스토리지 할당량을 관리할 수 있는 실험용 Quota Management API를 설명합니다. 이 문서는 개발자가 클라이언트 측 저장소의 일반적인 개념을 잘 알고 있고 오프라인 API 사용 방법을 알고 있다고 가정합니다.
목차
스토리지 유형
Chrome에서 다음 세 가지 유형의 저장용량을 요청할 수 있습니다.
이러한 저장소 유형은 다음 섹션에서 자세히 설명하고 아래 표에서 서로 비교해 볼 수 있습니다.
임시 저장소
임시 저장소는 모든 웹 앱에서 사용할 수 있는 임시 저장소입니다. Chrome은 앱에 임시 저장소를 자동으로 제공하므로 할당을 요청할 필요가 없습니다.
풀 공유
임시 저장소는 브라우저에서 실행되는 모든 웹 앱 간에 공유됩니다.
공유 풀은 사용 가능한 디스크 공간의 최대 1/3까지 차지할 수 있습니다. 앱에서 이미 사용 중인 스토리지는 공유 풀 계산에 포함됩니다. 즉, 계산은 (available storage space + storage being used by apps) * .333를 기반으로 합니다.
각 앱은 공유 풀을 최대 20% 까지 보유할 수 있습니다. 예를 들어 사용 가능한 총 디스크 공간이 60GB인 경우 공유 풀은 20GB가 되고 앱의 최대 크기는 4GB입니다. 가용 디스크 공간(60GB)의 1/3 (최대 20GB) 중 20% (최대 4GB)로 계산됩니다.
추가 공간 요청 중
앱에 사용할 수 있는 저장공간과 앱에 이미 저장된 데이터의 양을 쿼리할 수 있지만 임시 저장공간을 추가로 요청할 수는 없습니다. 앱이 할당된 할당량을 초과하면 오류가 발생합니다.
스토리지 부족
전체 풀의 스토리지 할당량이 초과되면 가장 오래전에 사용된 호스트에 저장된 전체 데이터가 삭제됩니다. 하지만 브라우저에서는 LocalStorage 및 SessionStorage의 데이터가 영구 삭제되지 않습니다. 다른 오프라인 API에 저장된 데이터의 경우 브라우저에서 일부 데이터가 아닌 전체를 삭제하여 앱 데이터가 예기치 않은 방식으로 손상되지 않도록 합니다.
각 앱은 스토리지 풀의 최대 20% 로 제한되므로 사용자가 각각 최대 스토리지를 사용하는 오프라인 앱을 5개 이상 적극적으로 실행하는 경우에만 삭제가 이루어질 가능성이 높습니다.
하지만 사용자가 하드 드라이브에 파일을 더 추가하면 사용 가능한 저장공간이 줄어들 수 있습니다. 사용 가능한 디스크 공간이 부족하면 (공유 풀이 사용 가능한 현재 디스크 공간의 절반만 차지함) 브라우저에서는 가장 오래전에 사용된 호스트의 저장된 모든 데이터를 삭제합니다.
영구 스토리지
영구 저장소는 사용자가 삭제하지 않는 한 브라우저에 남아 있는 저장소입니다. File System API를 사용하는 앱에서만 사용할 수 있지만, 궁극적으로는 IndexedDB 및 Application Cache와 같은 다른 오프라인 API에서도 사용할 수 있게 됩니다.
애플리케이션은 임시 스토리지보다 영구 스토리지 할당량이 더 클 수 있지만 Quota Management API를 사용하여 스토리지를 요청해야 하며 사용자가 더 많은 공간을 사용할 수 있는 권한을 부여해야 합니다. Chrome은 사용자에게 앱에 추가 로컬 저장공간을 부여하라는 메시지를 표시하는 정보 표시줄을 표시합니다.
무제한 저장용량
무제한 스토리지는 영구 스토리지와 비슷하지만 Chrome 앱 및 확장 프로그램 (.crx 파일)에서만 사용할 수 있습니다. 무제한 저장소의 크기는 사용자 하드 드라이브 내 공간의 가용성에 따라서만 제한됩니다. 앱 또는 확장 프로그램의 매니페스트 파일에서 unlimitedStorage 권한을 요청할 수 있습니다. 설치 시 사용자에게 앱 또는 확장 프로그램에서 요구하는 권한을 알립니다. 설치를 진행하면 사용자는 manifest.json 파일에 URL이 나열된 모든 페이지에 대해 암시적으로 권한을 부여합니다.
자세히 알아보려면 앱 및 확장 프로그램에 관한 해당 개발자 가이드를 참고하세요.
스토리지 유형 비교
다음 표에서는 세 가지 유형의 스토리지 간 차이점을 설명합니다.
| 임시 저장소 | 영구 스토리지 | 무제한 저장용량 | |
|---|---|---|---|
| 기본 설명 | 모든 웹 앱에서 사용할 수 있는 임시 저장소입니다. 자동으로 수행되므로 요청할 필요가 없습니다. | Quota Management API를 통해 요청하고 사용자가 부여해야 하는 영구 스토리지입니다. | Chrome 확장 프로그램 및 앱을 위한 영구 저장소 이 권한은 매니페스트 파일에 설정되어 있으며 사용자가 부여해야 합니다. |
| 제공 지역 | 모든 웹 앱 | 모든 웹 앱 | Chrome 확장 프로그램 및 호스팅되고 설치된 웹 앱에만 적용됩니다. |
| 권한 | 없음 명시적으로 요청하지 않고도 사용할 수 있습니다. | Quota Management API를 사용하여 추가 스토리지를 요청해야 합니다. | 앱 또는 확장 프로그램의 매니페스트 파일에서 unlimitedStorage 권한을 요청할 수 있습니다. |
| 처음 사용 시 사용자 환경 | 사용자에게 표시되지 않습니다. 앱이 그냥 실행됩니다. | Chrome은 사용자에게 저장용량 요청을 수락 또는 거부하라는 정보 표시줄을 표시합니다. 하지만 요청하는 할당량의 양이 실제로 앱의 현재 할당량보다 적으면 메시지가 표시되지 않습니다. 더 큰 할당량은 유지됩니다. | 설치 시 사용자에게 앱 또는 확장 프로그램에서 요구하는 권한을 알립니다. 설치를 진행하면 사용자가 앱 또는 확장 프로그램의 manifest.json 파일에 URL이 나열된 모든 페이지에 대해 암시적으로 권한을 부여합니다. |
| 저장용량 증가를 위한 후속 요청 시 사용자 환경 | 적용 불가능 임시 스토리지를 추가로 요청할 수 없습니다. | Chrome에서 사용자에게 다시 메시지를 표시합니다.
| Chrome은 앱 또는 확장 프로그램의 할당량 증가 요청과 관계없이 설치 후 사용자에게 메시지를 표시하지 않습니다. |
| 데이터의 지속성 | 일시적. 브라우저에서 데이터를 삭제할 수 있습니다. | 항상을 차례로 탭합니다. 브라우저에서는 사용자가 요청하지 않는 한 데이터를 삭제하지 않습니다. 후속 액세스에서 데이터를 사용할 수 있습니다. 사용자가 삭제할 수 있으므로 데이터가 영구적이라고 가정하지 마세요. | 영구 스토리지와 동일합니다.
|
| 기본 저장공간 | 공용 풀의 최대 20%. | 0MB 특정 저장공간을 명시적으로 요청해야 합니다. | 0MB 매니페스트 파일에서 저장용량 요구사항을 지정하지 않으면 Chrome은 임시 저장용량의 공유 풀에서 앱에 저장용량을 할당합니다. |
| 최대 저장공간 | 공용 풀의 최대 20%. | 하드 드라이브에서 사용 가능한 최대 공간만큼 큽니다. 고정된 스토리지 풀이 없습니다. | 하드 드라이브에서 사용 가능한 최대 공간만큼 큽니다. |
| 권장 사용 사례 | 캐싱. | 오프라인으로 작동하거나 애셋이 많은 앱 | Chrome에서 실행되도록 설계된 앱입니다. |
| 이를 사용할 수 있는 API | 오프라인 API
참고: LocalStorage 및 SessionStorage와 같은 웹 스토리지 API는 5MB로 고정되어 있습니다. | 파일 시스템 API | 오프라인 API
참고: LocalStorage 및 SessionStorage와 같은 웹 스토리지 API는 5MB로 고정되어 있습니다. |
할당량 관리
Chrome 13에 도입된 Quota Management API를 사용하면 다음 작업을 할 수 있습니다.
API는 전역 객체 window.webkitStorageInfo로 구현됩니다.
참조 문서는 다음 섹션을 확인하세요.
스토리지 사용량 및 가용성 쿼리
사용 중인 저장소 크기와 호스트에 남은 공간을 쿼리하려면 다음을 사용하여 queryUsageAndQuota()를 호출합니다.
- 확인할 스토리지 유형
- 콜백 성공
각 스토리지에 메타데이터를 저장하려면 추가 바이트가 필요할 수 있으므로 API에서 보고된 사용량은 사용자 데이터의 실제 크기와 일치하지 않을 수 있습니다. 또한 상태 업데이트가 지연되어 API에 최근 스토리지 상태가 반영되지 않을 수 있습니다.
다음 코드 스니펫은 저장공간에 관해 문의하는 방법을 보여줍니다.
// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
function(usedBytes, grantedBytes) {
console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
},
function(e) { console.log('Error', e); }
);
영구 스토리지 상태를 확인하려면 webkitStorageInfo.TEMPORARY를 webkitStorageInfo.PERSISTENT로 바꾸면 됩니다. enum은 window 객체 (전역 네임스페이스)에도 있으므로 window.PERSISTENT 및 window.TEMPORARY를 사용할 수도 있습니다.
추가 저장용량 요청
할당은 자동으로 수행되므로 임시 스토리지를 추가로 요청할 필요가 없으며 표에 설명된 최대 한도를 초과할 수 없습니다.
File System API용 영구 스토리지의 경우 기본 할당량은 0이므로 애플리케이션의 스토리지를 명시적으로 요청해야 합니다. 다음을 사용하여 requestQuota()를 호출합니다.
- 스토리지 유형
- 크기
- 콜백 성공
요청한 항목에 따라 다음이 발생합니다.
- 더 큰 할당량을 요청하면 브라우저에서 사용자에게 정보 표시줄을 표시하고 할당량 증가를 위한 권한을 부여하거나 거부하라는 메시지를 표시합니다. 경우에 따라 요청이 자동으로 거부되고 현재 할당량 또는 더 작은 할당량이 반환됩니다.
- 요청하는 할당량이 앱의 현재 할당량보다 적으면 메시지가 표시되지 않습니다.
- 허용된 것보다 더 많은 저장용량을 요청하면 오류 (
QUOTA_EXCEEDED_ERR)가 표시됩니다. - 사용자가 이미 권한을 부여한 후에
requestQuota()를 다시 호출하면 아무 일도 일어나지 않습니다. 따라서 메서드를 다시 호출하지 않아도 됩니다.
다음은 추가 저장공간을 요청하는 방법입니다.
// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB
navigator.webkitPersistentStorage.requestQuota (
requestedBytes, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) { console.log('Error', e); }
);
});
테스트 할당량 재설정
앱에서 스토리지를 테스트할 때는 앱에서 할당량 관리를 새로 테스트할 수 있도록 저장된 데이터를 삭제하는 것이 좋습니다. 이렇게 하려면 다음 안내를 따르세요.
- 검색주소창 (주소 표시줄)에
chrome://settings/cookies를 입력합니다. - 앱을 검색합니다.
- 앱을 선택합니다.
- 강조표시된 선택 항목의 오른쪽에 있는 X를 클릭합니다.
API 참조
이 섹션에서는 Quota Management API의 메서드에 대해 설명합니다.
상수
다음은 스토리지 유형을 나타내는 webkitStorageInfo 상수입니다.
| 상수 | 값 | 설명 |
|---|---|---|
TEMPORARY | 0 | 임시 저장소 |
PERSISTENT | 1 | 영구 스토리지 |
메서드 개요
queryUsageAndQuota |
requestQuota |
방법
queryUsageAndQuota
사용 중인 스토리지 크기 및 호스트에 사용할 수 있는 남은 공간을 확인합니다.
// you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
successCallback,
errorCallback);
successCallback: 매개변수 두 개가 있는 선택적 콜백입니다.- 앱에서 사용 중인 현재 바이트 수입니다.
- 할당량의 남은 바이트 수입니다.
errorCallback: 선택적 오류 콜백입니다.
requestQuota
추가 저장용량을 요청합니다. 브라우저에서 사용자에게 추가 저장용량을 확보할 수 있는 권한을 앱에 부여하거나 거부하라는 메시지를 표시하는 정보 표시줄을 표시합니다.
// you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
newQuotaInBytes,
quotaCallback,
errorCallback);
매개변수
newQuotaInBytes: 스토리지 할당량에 포함하려는 바이트 수입니다.successCallback: 부여된 바이트 수를 전달하는 선택적 콜백입니다.errorCallback: 선택적 오류 콜백입니다.
향후 개발
계획은 IndexedDB, Application Cache, File System 및 기타 지정될 수 있는 API를 포함한 모든 HTML5 오프라인 스토리지 API를 Quota Management API 아래에 배치하는 것입니다. 이 스토리지로 모든 스토리지 할당을 관리할 수 있습니다.