이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용 가능한 저장공간 예측

Jeff Posnick

요약 정리

앞으로 더 많은 브라우저가 출시될 예정이므로 이제 Chrome 61에서 웹 앱에서 사용 중인 스토리지와 사용 가능한 스토리지:

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({usage, quota}) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  });
}

과거: `window.webkitStorageInfo` 및 `navigator.webkitTemporaryStorage`

브라우저는 지금까지 접두사 매우 오래되고 지원 중단된 인터페이스 등 window.webkitStorageInfo님, 낡은 것은 아니지만 여전히 비표준 navigator.webkitTemporaryStorage 이러한 인터페이스는 유용한 정보를 제공하지만 웹 표준으로 자리매김할 것입니다.

WhatWG 스토리지 표준은 입력합니다.

미래: `navigator.storage`

Storage Living 표준 관련 지속적인 작업의 일환으로 몇 가지 유용한 API가 그것을 StorageManager 이 인터페이스는 브라우저에 navigator.storage 다른 여러 최신 웹 API와 마찬가지로 navigator.storage는 안전한 환경에서만 사용할 수 있습니다. (HTTPS 또는 localhost를 통해 제공됨) 출처에서 가져옵니다.

작년에 Google에서는 navigator.storage.persist() 메서드를 사용하여 웹 애플리케이션에서 자체 스토리지를 사용하도록 자동 정리에서 제외됩니다

이제 navigator.storage.estimate() 메서드로 조인됩니다. 이 메서드는 navigator.webkitTemporaryStorage.queryUsageAndQuota()의 최신 교체품입니다. estimate()는 비슷한 정보를 반환하지만 프라미스 기반 인터페이스로 이는 다른 최신 비동기 API와 유사합니다. Google Cloud가 이끄는 estimate()는 두 속성 usage, 는 현재 사용 중인 바이트 수를 나타내고 quota는 현재 사용 중인 바이트 수를 나타냅니다. 현재 저장 가능한 최대 바이트 origin을 확인하세요. (저장용량과 관련된 다른 모든 것과 마찬가지로 할당량은 origin.)

웹 애플리케이션이 IndexedDB 또는 Cache Storage API - 지정된 출처를 가져올 수 있을 정도로 큰 데이터 사용할 수 없는 경우 요청이 실패하고 QuotaExceededError 드림 예외가 인정됩니다.

스토리지 추정치 적용

estimate()를 사용하는 정확한 방법은 앱에 필요한 데이터 유형에 따라 다릅니다. 있습니다. 예를 들어, 인터페이스에서 컨트롤을 업데이트하여 사용자가 각 저장 작업이 완료된 후 사용 중인 공간을 알 수 있습니다. 사용자가 데이터를 수동으로 정리할 수 있는 인터페이스를 제공하는 것이 이상적입니다. 더 이상 필요하지 않습니다 다음 줄에 따라 코드를 작성할 수 있습니다.

// For a primer on async/await, see
// https://developers.google.com/web/fundamentals/getting-started/primers/async-functions
async function storeDataAndUpdateUI(dataUrl) {
  // Pro-tip: The Cache Storage API is available outside of service workers!
  // See https://googlechrome.github.io/samples/service-worker/window-caches/
  const cache = await caches.open('data-cache');
  await cache.add(dataUrl);

  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const {usage, quota} = await navigator.storage.estimate();
    const percentUsed = Math.round(usage / quota * 100);
    const usageInMib = Math.round(usage / (1024 * 1024));
    const quotaInMib = Math.round(quota / (1024 * 1024));

    const details = `${usageInMib} out of ${quotaInMib} MiB used (${percentUsed}%)`;

    // This assumes there's a <span id="storageEstimate"> or similar on the page.
    document.querySelector('#storageEstimate').innerText = details;
  }
}

추정치는 얼마나 정확한가요?

함수에서 얻은 데이터가 단지 출처가 사용 중인 공간의 추정치입니다. 바로 함수 이름! usage 및 quota 값 모두 안정적일 수 없으므로 다음 사항을 고려하는 것이 좋습니다.

usage는 지정된 출처에서 실제로 사용하는 바이트 수를 나타냅니다. 동일 출처 내부 압축 기법의 영향을 받을 수 있으므로 사용되지 않은 공간이 포함될 수 있는 고정 크기 할당 블록과 "Tombstone" 기록 임시로 생성될 수 있는 임시 캠페인도 있습니다 누출을 방지하기 위해 교차 출처(cross-origin) 및 불투명 리소스 로컬에 저장되면 전체 usage에 추가 패딩 바이트가 기여할 수 있습니다. 값으로 사용됩니다.
quota는 현재 출처에 예약된 공간의 양을 반영합니다. 이 전체 저장용량 크기와 같은 몇 가지 상수 요인에 따라 달라질 수 있지만 저장공간의 양 등 잠재적인 휘발성 요인 수 현재 사용되지 않는 것입니다 따라서 기기의 다른 애플리케이션이 데이터, 브라우저가 웹에 할애하고자 하는 공간의 양 앱의 출처가 변경될 수 있습니다

현재: 특성 감지 및 대체

Chrome 61부터 estimate()가 기본적으로 사용 설정됩니다. Firefox는 navigator.storage(으)로 실험하고 있지만 2017년 8월 현재 사용되지 않습니다. 기본적으로 사용 설정되어 있습니다. 해야 할 일 dom.storageManager.enabled 환경설정 사용 설정 테스트할 수 있습니다.

일부 브라우저에서만 지원되는 기능으로 작업할 때는 특성 감지는 필수입니다 특성 감지와 특성 감지를 결합하여 이전 navigator.webkitTemporaryStorage 기반의 프라미스 기반 래퍼 메서드를 사용하여 다음 행에 일관된 인터페이스를 제공할 수 있습니다.

function storageEstimateWrapper() {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    // We've got the real thing! Return its response.
    return navigator.storage.estimate();
  }

  if ('webkitTemporaryStorage' in navigator &&
      'queryUsageAndQuota' in navigator.webkitTemporaryStorage) {
    // Return a promise-based wrapper that will follow the expected interface.
    return new Promise(function(resolve, reject) {
      navigator.webkitTemporaryStorage.queryUsageAndQuota(
        function(usage, quota) {resolve({usage: usage, quota: quota})},
        reject
      );
    });
  }

  // If we can't estimate the values, return a Promise that resolves with NaN.
  return Promise.resolve({usage: NaN, quota: NaN});
}