การประมาณพื้นที่เก็บข้อมูลที่ใช้ได้

Jeff Posnick

DR

Chrome 61 และเบราว์เซอร์อื่นๆ ที่จะตามมาในอนาคต แสดงค่าประมาณของ พื้นที่เก็บข้อมูลที่เว็บแอปใช้และจำนวนปริมาณที่ใช้ได้ผ่าน

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

เว็บแอปและพื้นที่เก็บข้อมูลที่ทันสมัย

เมื่อนึกถึงความต้องการพื้นที่เก็บข้อมูลของเว็บแอปพลิเคชันสมัยใหม่ แยกข้อมูลที่จัดเก็บเป็น 2 หมวดหมู่ ได้แก่ ข้อมูลหลักที่จำเป็นในการโหลด เว็บแอปพลิเคชัน และข้อมูลที่จำเป็นสำหรับการโต้ตอบที่มีความหมายของผู้ใช้ แอปพลิเคชันก็จะโหลดขึ้นมา

ข้อมูลประเภทแรกสิ่งที่ต้องใช้ในการโหลดเว็บแอปประกอบด้วย HTML JavaScript, CSS และบางทีอาจเป็นรูปภาพ Service Worker พร้อมด้วย Cache Storage API จัดหาโครงสร้างพื้นฐานที่จำเป็นสำหรับการประหยัดทรัพยากรหลักเหล่านั้นและใช้ ภายหลังเพื่อให้โหลดเว็บแอปของคุณได้อย่างรวดเร็ว ซึ่งควรจะข้ามเครือข่ายไปเลย (เครื่องมือที่ผสานรวมกับกระบวนการสร้างของเว็บแอปพลิเคชันของคุณ เช่น ไลบรารี Workbox หรือไลบรารีที่เก่ากว่า sw-precache สามารถทำให้กระบวนการจัดเก็บ อัปเดต และการใช้งานประเภทนี้เป็นไปโดยอัตโนมัติ data.)

แล้วข้อมูลประเภทอื่นล่ะ ทรัพยากรเหล่านี้ไม่จำเป็นต่อการ โหลดเว็บแอปของคุณ แต่อาจมีบทบาทสำคัญสำหรับผู้ใช้โดยรวมของคุณ ประสบการณ์การใช้งาน ตัวอย่างเช่น หากคุณเขียนแอปพลิเคชันเว็บสำหรับการแก้ไขรูปภาพ คุณอาจ ต้องการบันทึกสำเนารูปภาพอย่างน้อย 1 สำเนาไว้ในเครื่อง เพื่อให้ผู้ใช้สามารถเปลี่ยน ระหว่างการแก้ไขและยกเลิกการทำงานนั้น หรือหากคุณพัฒนาสื่อออฟไลน์ ประสบการณ์การเล่น การบันทึกไฟล์เสียงหรือวิดีโอไว้ในเครื่องเป็นสิ่งสำคัญ เว็บแอปทุกรายการที่สามารถปรับเปลี่ยนในแบบของคุณได้ในที่สุดก็จำเป็นต้องบันทึกบางส่วน ข้อมูลรัฐ คุณจะทราบได้อย่างไรว่าพื้นที่เก็บข้อมูลรันไทม์ประเภทนี้มีพื้นที่เหลืออยู่เท่าใด และจะเกิดอะไรขึ้นเมื่อพื้นที่เก็บข้อมูลเต็ม

อดีต: window.webkitStorageInfo และ navigator.webkitTemporaryStorage

ที่ผ่านมา เบราว์เซอร์สนับสนุนการสำรวจความคิดเห็นประเภทนี้ผ่านทางข้อความนำหน้า อินเทอร์เฟซแบบเดิมๆ (และเลิกใช้งานแล้ว) window.webkitStorageInfo ไม่ได้ค่อนข้างเก่า แต่ยังไม่ใช่มาตรฐาน navigator.webkitTemporaryStorage แม้ว่าอินเทอร์เฟซเหล่านี้จะให้ข้อมูลที่เป็นประโยชน์ แต่ก็ไม่มี มาตรฐานเว็บด้วย

ซึ่งนั่นคือกรณีที่ใช้ WHATWG Storage Standard เข้าสู่ภาพ

อนาคต: navigator.storage

API ที่มีประโยชน์ 2 รายการเป็นส่วนหนึ่งของการพัฒนา Storage Living Standard อย่างต่อเนื่อง เป็น StorageManager ซึ่งแสดงต่อเบราว์เซอร์ navigator.storage navigator.storage จะใช้งานได้เฉพาะในระบบที่ปลอดภัยเท่านั้น เช่นเดียวกับ API เว็บรุ่นใหม่อื่นๆ อีกมากมาย (แสดงผ่าน HTTPS หรือ localhost)

เมื่อปีที่แล้ว เราได้เปิดตัว navigator.storage.persist() ซึ่งทำให้เว็บแอปพลิเคชันสามารถขอพื้นที่เก็บข้อมูล ได้รับการยกเว้นจากการล้างข้อมูลอัตโนมัติ

ขณะนี้ได้มีการผนวกเข้าด้วยกันโดยเมธอด navigator.storage.estimate() ซึ่งทำหน้าที่เป็น การแทนที่ navigator.webkitTemporaryStorage.queryUsageAndQuota() ในปัจจุบัน estimate() แสดงข้อมูลที่คล้ายกัน แต่แสดง อินเทอร์เฟซที่อิงตามสัญญา ซึ่งสอดคล้องกับ API อะซิงโครนัสสมัยใหม่อื่นๆ สัญญาที่ว่า estimate() แสดงผลการแปลงด้วยออบเจ็กต์ที่มีพร็อพเพอร์ตี้ 2 รายการ ได้แก่ 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" ระเบียน ที่อาจสร้างขึ้นชั่วคราวหลังจากการลบ เพื่อป้องกันการรั่วไหล ของข้อมูลขนาดที่แน่นอน ข้ามต้นทาง ทรัพยากรที่ไม่ชัดเจน ที่บันทึกไว้ในเครื่องอาจมีส่วนเพิ่มไบต์ของระยะห่างจากขอบให้กับ usage โดยรวม
• quota แสดงปริมาณพื้นที่ซึ่งสำรองไว้สำหรับต้นทางในขณะนี้ ค่าจะขึ้นอยู่กับปัจจัยที่คงที่บางอย่าง เช่น ขนาดพื้นที่เก็บข้อมูลโดยรวม แต่ยังรวมถึง จำนวนปัจจัยที่อาจผันผวน เช่น จำนวนพื้นที่เก็บข้อมูล ที่ไม่ได้ใช้งานอยู่ในขณะนี้ เพื่อให้แอปพลิเคชันอื่นๆ ในอุปกรณ์เขียนหรือลบ ซึ่งก็คือจำนวนพื้นที่ที่เบราว์เซอร์ยินดีมอบให้เว็บของคุณ ต้นทางของแอปอาจเปลี่ยนแปลง

ปัจจุบัน: การตรวจหาฟีเจอร์และฟีเจอร์สำรอง

ระบบจะเปิดใช้ estimate() โดยค่าเริ่มต้นใน Chrome 61 เป็นต้นไป Firefox คือ กำลังทดสอบกับ navigator.storage แต่ตั้งแต่เดือนสิงหาคม 2017 เป็นต้นมา การทดสอบก็ไม่ได้เปลี่ยนไป โดยค่าเริ่มต้น สิ่งที่คุณต้องทำ เปิดใช้ค่ากำหนด dom.storageManager.enabled เพื่อทดสอบ

เมื่อทำงานกับฟังก์ชันที่มีเบราว์เซอร์บางประเภทยังไม่รองรับ การตรวจหาฟีเจอร์ถือเป็นสิ่งจำเป็น คุณสามารถรวมการตรวจหาฟีเจอร์กับ Wrapper ตามคำสัญญาที่ด้านบนของ 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});
}