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

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