การสร้างพื้นที่เก็บข้อมูลไม่เท่ากัน: การเปิดตัวที่เก็บข้อมูลของพื้นที่เก็บข้อมูล

Thomas Steiner

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

มาตรฐานพื้นที่เก็บข้อมูลช่วยแก้ปัญหาอะไรได้บ้าง

เดิมทีเมื่อผู้ใช้มีเนื้อที่เก็บข้อมูลในอุปกรณ์ไม่เพียงพอ ข้อมูลที่จัดเก็บไว้กับ API เช่น IndexedDB หรือ localStorage จะหายไปโดยที่ผู้ใช้ไม่สามารถแทรกแซงได้ วิธีทำให้พื้นที่เก็บข้อมูลถาวรคือการเรียกใช้เมธอด persist() ของอินเทอร์เฟซ StorageManager โดยจะขอสิทธิ์จากผู้ใช้ปลายทางและเปลี่ยนพื้นที่เก็บข้อมูลให้ถาวรเมื่อได้รับสิทธิ์

const persisted = await navigator.storage.persist();
if (persisted) {
  /* Storage will not be cleared except by explicit user action. */
}

วิธีการขอพื้นที่เก็บข้อมูลแบบถาวรนี้เป็นแบบ "ทั้งหมดหรือไม่มีเลย" คุณไม่สามารถระบุความต้องการการคงข้อมูลแบบละเอียดยิ่งขึ้นได้ ข้อมูลทั้งหมดอยู่ในที่เก็บข้อมูลเดียวกัน

Storage Buckets API

แนวคิดหลักของ Storage Buckets API คือการให้สิทธิ์เว็บไซต์สร้างที่เก็บข้อมูลหลายรายการ โดยเบราว์เซอร์อาจเลือกที่จะลบแต่ละที่เก็บข้อมูลแยกต่างหากจากที่เก็บข้อมูลอื่นๆ ซึ่งช่วยให้นักพัฒนาแอประบุลําดับความสําคัญของการลบออกได้ เพื่อให้แน่ใจว่าระบบจะไม่ลบข้อมูลที่มีค่าที่สุด

ตัวอย่าง Use Case

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

อินเทอร์เฟซแอปอีเมล
แอปอีเมลที่มีที่เก็บข้อมูลแยกต่างหากสำหรับกล่องจดหมายและอีเมลร่าง (ภาพนี้เป็นเพียงภาพประกอบเท่านั้น และไม่ได้แสดงถึงวิธีการทำงานของ Gmail)

ใช้ Storage Buckets API

สร้างที่เก็บข้อมูลใหม่

คุณสร้างที่เก็บข้อมูลใหม่ได้โดยใช้เมธอด open() ในอินเทอร์เฟซ StorageBucketManager 

// Create a storage bucket for emails that are synchronized with the
// server.
const inboxBucket = await navigator.storageBuckets.open('inbox');

สร้างที่เก็บข้อมูลใหม่แบบถาวร

คุณสามารถส่งอาร์กิวเมนต์ตัวเลือก durability และ persisted ไปยังเมธอด open() เพื่อให้แน่ใจว่าที่เก็บข้อมูลจะยังคงอยู่

  • persisted กำหนดว่าควรเก็บข้อมูลบัคเก็ตพื้นที่เก็บข้อมูลไว้หรือไม่ ค่าที่อนุญาตคือ false (ค่าเริ่มต้น) หรือ true

  • durability แสดงคำแนะนำแก่เบราว์เซอร์เพื่อช่วยในการแลกเปลี่ยนประสิทธิภาพการเขียนกับความเสี่ยงที่ลดลงของการสูญเสียข้อมูลในกรณีที่ไฟดับ ค่าที่อนุญาตคือ 'relaxed' (ค่าเริ่มต้น) หรือ 'strict'

    • 'strict' พยายามลดความเสี่ยงที่จะสูญเสียข้อมูลเมื่อไฟดับ ซึ่งอาจทำให้ประสิทธิภาพลดลง ซึ่งหมายความว่าการเขียนอาจใช้เวลานานขึ้น อาจส่งผลต่อประสิทธิภาพโดยรวมของระบบ อาจใช้พลังงานแบตเตอรี่มากขึ้น และอาจทำให้อุปกรณ์เก็บข้อมูลเสื่อมสภาพเร็วขึ้น
    • ถัง 'relaxed' อาจ "ลืม" การเขียนที่เสร็จสมบูรณ์ในช่วง 2-3 วินาทีที่ผ่านมาเมื่อไฟฟ้าดับ ในทางกลับกัน การเขียนข้อมูลลงในที่เก็บข้อมูลเหล่านี้อาจมีลักษณะประสิทธิภาพที่ดีขึ้น และอาจทำให้แบตเตอรี่ใช้งานได้นานขึ้น และอาจส่งผลให้อายุการใช้งานอุปกรณ์เก็บข้อมูลนานขึ้น นอกจากนี้ ไฟฟ้าดับจะไม่ทําให้ข้อมูลเสียหายในอัตราที่สูงกว่าที่เก็บข้อมูล'strict'
// Create a storage bucket for email drafts that only exist on the client.
const draftsBucket = await navigator.storageBuckets.open('drafts', {
  durability: 'strict', // Or `'relaxed'`.
  persisted: true, // Or `false`.
});

เข้าถึง Storage API จากที่เก็บข้อมูล

ที่เก็บข้อมูลแต่ละที่เชื่อมโยงกับ API ของพื้นที่เก็บข้อมูล เช่น IndexedDB, อินเทอร์เฟซ Cache หรืออินเทอร์เฟซ File API พื้นที่เก็บข้อมูลเหล่านี้ทำงานตามปกติ เพียงแต่จุดแรกเข้ามาจากอินเทอร์เฟซ StorageBucket เช่น StorageBucket.indexedDB

const inboxDb = await new Promise(resolve => {
  const request = inboxBucket.indexedDB.open('messages');
  request.onupgradeneeded = () => { /* migration code */ };
  request.onsuccess = () => resolve(request.result);
  request.onerror = () => reject(request.error);
});

แก้ไขข้อบกพร่องที่เก็บข้อมูลในเครื่องมือสำหรับนักพัฒนาเว็บ

ตรวจสอบที่เก็บข้อมูลในแผนภูมิเฉพาะในส่วนแอปพลิเคชัน > พื้นที่เก็บข้อมูล

ลักษณะก่อนและหลังการเปิดใช้โครงสร้างที่เก็บข้อมูลในส่วนพื้นที่เก็บข้อมูล

แหล่งข้อมูลที่มีประโยชน์