HTML5 오프라인 저장소 관리

HTML5에는 대량의 데이터를 사용자의 로컬 컴퓨터에 저장할 수 있는 다수의 저장소 API가 도입되었습니다. 있습니다. 하지만 각 앱에 할당되는 공간의 양은 기본적으로 몇 개의 MB 단위로 계산됩니다 Chrome에서는 기존의 한 번 한도보다 더 큰 저장용량을 5MB

이 문서에서는 Chrome에서 사용되는 저장소의 유형과 관련된 기본 개념을 소개하고 은 저장용량을 관리할 수 있는 실험용 쿼터 관리 API에 대해 설명합니다. 이 이 문서는 여러분이 클라이언트 측 스토리지의 일반적인 개념과 오프라인 API 사용 방법을 알아야 합니다.

목차

1. 스토리지 유형 <ph type="x-smartling-placeholder">
   </ph>
   1. 임시
   2. 지속적
   3. 무제한
   4. 스토리지 유형 비교
2. 할당량 관리 <ph type="x-smartling-placeholder">
   </ph>
   1. 쿼리 스토리지 사용량 및 가용성
   2. 추가 스토리지 요청하기
   3. 테스트 할당량 재설정
3. API 참조 <ph type="x-smartling-placeholder">
   </ph>
   1. 상수
   2. 메서드 개요
   3. 메서드
4. 향후 개발

스토리지 유형

Chrome에서는 세 가지 유형의 저장용량을 요청할 수 있습니다.

• 임시
• 지속적
• 무제한

이러한 저장소 유형은 다음 섹션에 더 자세히 설명되어 있으며 각 저장소 유형과 비교됩니다. 아래 표에 나와 있습니다.

임시 저장소

임시 저장소는 모든 웹 앱에서 사용할 수 있는 임시 저장소입니다. Chrome은 자동으로 앱 임시 저장공간이 확보되므로 할당을 요청할 필요가 없습니다.

풀 공유

임시 저장용량은 브라우저에서 실행되는 모든 웹 앱 간에 공유됩니다. 공유 풀은 사용 가능한 디스크 공간의 최대 1/3까지일 수 있습니다. 앱에서 이미 사용 중인 저장용량은 공유 풀 계산에 포함됩니다. 즉, 계산은 2012년의 (available storage space + storage being used by apps) * .333

각 앱은 공유 풀을 20% 까지 보유할 수 있습니다. 예를 들어 사용 가능한 총 디스크 공간이 60GB, 공용 스토리지는 20GB, 앱은 최대 4GB를 사용할 수 있습니다. 20% (최대 20%)에서 사용 가능한 디스크 공간 (60GB)의 1/3 (최대 20GB) 중 4GB.

추가 공간 요청 중

앱에서 사용할 수 있는 저장공간의 양과 크기를 쿼리할 수 있지만 이미 앱에 저장된 데이터의 양이 많으면 추가 임시 저장공간을 요청할 수 없습니다. 앱이 할당된 할당량을 초과하면 오류가 발생합니다.

저장용량 부족

전체 풀의 스토리지 할당량을 초과하면 삭제되어야 합니다. 하지만 브라우저는 LocalStorage의 데이터를 영구 삭제하지 않으며 SessionStorage를 사용할 수 있습니다. 다른 오프라인 API에 저장된 데이터의 경우 브라우저에서 데이터가 완전히 삭제되며 그래야 앱 데이터가 예기치 않은 방식으로 손상되지 않습니다.

각 앱은 스토리지 풀의 최대 20% 로 제한되므로 사용자가 앱에서 삭제할 수 있는 경우에만 은(는) 각각 최대 저장용량을 사용하는 5개 이상의 오프라인 앱을 활발하게 실행하고 있습니다.

하지만 사용자가 하드 드라이브에 파일을 추가하면 사용 가능한 저장공간이 줄어들 수 있습니다. 이 사용 가능한 디스크 공간이 부족해짐 (공유 풀은 사용 가능한 현재 디스크 공간의 절반만 디스크 공간)가 포함된 경우 브라우저에서 가장 오래전에 사용하지 않은 호스트에 대해 저장된 모든 데이터를 삭제합니다.

영구 스토리지

영구 저장소는 사용자가 삭제하지 않는 한 브라우저에 유지되는 저장용량입니다. 사용 가능 File System API를 사용하는 앱에만 제공되지만 향후 다른 오프라인 API에서도 사용할 수 있게 될 예정입니다. 애플리케이션 캐시 등입니다

애플리케이션의 영구 스토리지 할당량이 임시 스토리지보다 클 수 있지만 할당량 관리 API를 사용하여 저장용량을 요청하고 사용자가 더 많은 저장용량을 사용할 수 있도록 권한을 부여해야 합니다. 있습니다. Chrome은 사용자에게 앱에 로컬 저장공간을 추가하라는 메시지를 표시하는 정보 표시줄을 표시합니다.

무제한 저장용량

무제한 저장용량은 영구 저장용량과 비슷하지만 Chrome 앱 및 확장자 (.crx 파일) 무제한 저장용량의 크기는 공간의 가용성에 의해서만 제한됩니다. 사용자의 하드 드라이브에 저장됩니다. 다음 매니페스트 파일에서 unlimitedStorage 권한을 요청할 수 있습니다. 앱 또는 확장 프로그램. 설치 시 사용자는 변경할 수 있습니다. 설치를 진행하여 사용자는 에 대한 권한을 암시적으로 부여합니다. manifest.json 파일에 URL이 나열된 모든 페이지

자세히 알아보려면 앱 및 확장 프로그램에 관한 각 개발자 가이드를 참고하세요.

스토리지 유형 비교

다음 표는 세 가지 스토리지 유형의 차이점을 설명합니다.

할당량 관리

Chrome 13에서 도입된 할당량 관리 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.PERSISTENT에서 webkitStorageInfo.TEMPORARY 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); }
);
});

테스트 할당량 재설정

앱에서 저장용량을 테스트할 때 할당량 관리를 새로 테스트할 수 있습니다. 방법은 다음과 같습니다.

1. 검색주소창 (주소 표시줄)에 chrome://settings/cookies을 입력합니다.
2. 앱을 검색합니다.
3. 앱을 선택합니다.
4. 강조표시된 선택 항목의 오른쪽에 있는 X를 클릭합니다.

API 참조

이 섹션에서는 할당량 관리 API의 메서드를 설명합니다.

상수

다음은 저장소 유형을 나타내는 webkitStorageInfo 상수입니다.

메서드 개요

메서드

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을 포함하여 모든 HTML5 오프라인 저장소 API를 배치할 계획입니다. 시스템 및 지정되었을 수 있는 기타 API - 할당량 아래 관리 API 이를 통해 모든 스토리지 할당을 관리할 수 있습니다.