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

โธมัส สไตน์เนอร์

มาตรฐานพื้นที่เก็บข้อมูลจะกำหนด 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. */
}

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

Storage Buckets API

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

ตัวอย่างกรณีการใช้งาน

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

อินเทอร์เฟซแอปอีเมล
แอปอีเมลที่มีที่เก็บข้อมูลของพื้นที่เก็บข้อมูลแยกต่างหากสำหรับกล่องจดหมายและฉบับร่าง (มีไว้เพื่อการอธิบายเท่านั้น สถานะนี้อาจไม่ได้แสดงถึงวิธีการทำงานของ 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`.
});

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

ที่เก็บข้อมูลของพื้นที่เก็บข้อมูลแต่ละรายการจะเชื่อมโยงกับ API ของพื้นที่เก็บข้อมูล เช่น IndexedDB อินเทอร์เฟซ แคช หรืออินเทอร์เฟซ 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);
});

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