Trang này được dịch bởi Cloud Translation API.

Ước tính dung lượng lưu trữ còn trống

Jeff Posnick

Tóm tắt

Chrome 61 (sẽ có thêm nhiều trình duyệt tiếp theo) nay đưa ra số liệu ước tính bộ nhớ mà một ứng dụng web đang sử dụng và lượng bộ nhớ còn trống thông qua:

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

Bộ nhớ dữ liệu và ứng dụng web hiện đại

Khi bạn xem xét nhu cầu lưu trữ của một ứng dụng web hiện đại, điều đó giúp chia những gì đang được lưu trữ thành hai danh mục: dữ liệu cốt lõi cần thiết để tải ứng dụng web và dữ liệu cần thiết để người dùng tương tác một lần có ý nghĩa đã tải ứng dụng.

Loại dữ liệu đầu tiên, những gì cần để tải ứng dụng web của bạn, bao gồm HTML, JavaScript, CSS và có thể là một số hình ảnh. Trình chạy dịch vụ, cùng với Cache Storage API (API Bộ nhớ đệm) cung cấp cơ sở hạ tầng cần thiết để lưu những tài nguyên cốt lõi đó rồi sau đó sử dụng chúng sau để tải nhanh ứng dụng web của bạn, lý tưởng nhất là bỏ qua mạng hoàn toàn. (Các công cụ tích hợp với quy trình xây dựng ứng dụng web của bạn, chẳng hạn như Thư viện Workbox hoặc thư viện cũ hơn sw-precache! có thể tự động hoá hoàn toàn quy trình lưu trữ, cập nhật và sử dụng loại data.)

Còn loại dữ liệu kia thì sao? Đây là những tài nguyên không cần thiết để tải ứng dụng web của bạn, nhưng có thể đóng vai trò quan trọng đối với người dùng nói chung của bạn. Ví dụ: nếu đang viết một ứng dụng web chỉnh sửa hình ảnh, bạn có thể muốn lưu một hoặc nhiều bản sao cục bộ của một hình ảnh, cho phép người dùng chuyển đổi giữa các lần sửa đổi và huỷ công việc của chúng. Hoặc nếu bạn đang phát triển phương tiện ngoại tuyến trải nghiệm phát lại, việc lưu các tệp âm thanh hoặc video trên thiết bị sẽ là những yếu tố quan trọng của chúng tôi. Mọi ứng dụng web có thể được cá nhân hoá sẽ cần lưu một số thông tin thông tin về tiểu bang. Làm cách nào để biết có bao nhiêu dung lượng còn cho loại bộ nhớ thời gian chạy này, và điều gì sẽ xảy ra khi bạn hết dung lượng?

Trước đây: `window.webkitStorageInfo` và `navigator.webkitTemporaryStorage`

Các trình duyệt trước đây đã hỗ trợ loại nội dung truy cập này bằng cách sử dụng tiền tố như các giao diện rất cũ (và không dùng nữa) window.webkitStorageInfo! và phiên bản tuy đã cũ nhưng vẫn chưa đạt tiêu chuẩn navigator.webkitTemporaryStorage. Mặc dù các giao diện này cung cấp thông tin hữu ích, nhưng chúng không có làm các tiêu chuẩn web trong tương lai.

Đó là nơi Tiêu chuẩn lưu trữ WhatWG vào hình ảnh.

Tương lai: `navigator.storage`

Trong quá trình nỗ lực không ngừng dành cho Storage Living Standard, một số API hữu ích đã giúp ứng dụng đó vào StorageManager được hiển thị với các trình duyệt dưới dạng navigator.storage. Giống như nhiều API web mới hơn khác, navigator.storage chỉ hoạt động ở chế độ bảo mật (được phân phát qua HTTPS hoặc nguồn gốc máy chủ cục bộ).

Năm ngoái, chúng tôi đã giới thiệu navigator.storage.persist() , phương thức này cho phép ứng dụng web của bạn yêu cầu bộ nhớ của ứng dụng được miễn trừ khỏi việc tự động xoá.

Giờ đây, lớp này được kết hợp bằng phương thức navigator.storage.estimate(), đóng vai trò là phương thức thay thế hiện đại cho navigator.webkitTemporaryStorage.queryUsageAndQuota(). estimate() trả về thông tin tương tự, nhưng sẽ hiển thị giao diện dựa trên lời hứa, phù hợp với các API không đồng bộ hiện đại khác. Lời hứa estimate() trả về phân giải với một đối tượng chứa hai thuộc tính: usage, biểu thị số byte hiện đang sử dụng và quota đại diện cho số byte tối đa có thể được lưu trữ bởi nguồn gốc. (Giống như mọi nội dung khác liên quan đến bộ nhớ, hạn mức sẽ được áp dụng trên toàn bộ origin.)

Nếu một ứng dụng web cố gắng lưu trữ—ví dụ: sử dụng IndexedDB hoặc Cache Storage API (API Bộ nhớ đệm) – dữ liệu đủ lớn để kết hợp một nguồn gốc nhất định đến hạn mức hiện có, yêu cầu sẽ không thành công với QuotaExceededError ngoại lệ.

Thông tin ước tính về dung lượng lưu trữ trong thực tế

Việc bạn sử dụng estimate() chính xác hay không phụ thuộc vào loại dữ liệu mà ứng dụng của bạn cần của bạn. Ví dụ: bạn có thể cập nhật một chế độ kiểm soát trong giao diện để cho phép người dùng biết lượng dung lượng đang được sử dụng sau khi mỗi thao tác lưu trữ hoàn tất. Sau đó, bạn nên cung cấp một giao diện cho phép người dùng dọn dẹp dữ liệu theo cách thủ công không còn cần thiết nữa. Bạn có thể viết mã dọc theo các dòng:

// 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;
  }
}

Số liệu ước tính có chính xác không?

Khó bỏ lỡ một thực tế là dữ liệu bạn nhận lại được từ hàm này chỉ ước tính không gian mà một nguồn gốc đang sử dụng. Nó nằm ngay trong hàm tên! Cả usage và quota đều không cố định, vì vậy bạn nên cân nhắc những điều sau:

usage phản ánh số lượng byte mà một nguồn gốc nhất định đang sử dụng hiệu quả cho cùng nguồn gốc có thể chịu ảnh hưởng của các kỹ thuật nén nội bộ, khối phân bổ kích thước cố định có thể bao gồm không gian không sử dụng và sự hiện diện thuộc "tombstone" bản ghi có thể được tạo tạm thời sau khi xoá. Để ngăn rò rỉ về thông tin kích thước chính xác, nhiều nguồn gốc, tài nguyên không rõ ràng được lưu cục bộ có thể đóng góp thêm các byte đệm cho usage tổng thể giá trị.
quota phản ánh lượng không gian hiện được đặt trước cho một điểm khởi hành. Chiến lược phát hành đĩa đơn giá trị phụ thuộc vào một số yếu tố không đổi như tổng dung lượng lưu trữ, nhưng cũng số lượng các yếu tố có thể biến động, bao gồm cả dung lượng lưu trữ hiện chưa được sử dụng. Vì vậy, giống như các ứng dụng khác trên thiết bị, hãy ghi hoặc xoá lượng không gian lưu trữ mà trình duyệt sẵn sàng dành cho web của bạn nguồn gốc của ứng dụng có thể sẽ thay đổi.

Hiện tại: phát hiện tính năng và dự phòng

estimate() được bật theo mặc định kể từ Chrome 61. Firefox là thử nghiệm với navigator.storage, nhưng kể từ tháng 8 năm 2017, bật theo mặc định. Bạn cần bật lựa chọn ưu tiên về dom.storageManager.enabled để thử nghiệm công cụ đó.

Khi làm việc với chức năng chưa được hỗ trợ trong tất cả các trình duyệt, phát hiện tính năng. Bạn có thể kết hợp tính năng phát hiện tính năng cùng với một trình bao bọc dựa trên lời hứa ở trên navigator.webkitTemporaryStorage cũ hơn để cung cấp một giao diện nhất quán dọc theo các dòng:

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});
}