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

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 คือ ทำให้เว็บไซต์สามารถสร้างที่เก็บข้อมูลได้หลายที่เก็บข้อมูล ซึ่งเบราว์เซอร์อาจเลือกที่จะ ลบที่เก็บข้อมูลแต่ละชุดแยกจากกันจากที่เก็บข้อมูลอื่นๆ สิทธิ์นี้อนุญาตให้นักพัฒนาแอประบุการปลดออก การจัดลำดับความสำคัญ เพื่อให้แน่ใจว่าข้อมูลที่มีค่าที่สุดจะไม่ถูกลบ

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

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

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

ใช้ Storage Buckets API

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

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

// 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' รายการอาจ "ลืม" ได้ การเขียนที่เสร็จสมบูรณ์ในช่วงไม่กี่วินาทีที่ผ่านมาเมื่อ เพราะไม่มีกระแสไฟเข้า ในทางกลับกัน การเขียนข้อมูลลงในที่เก็บข้อมูลเหล่านี้อาจมีประสิทธิภาพดีกว่า และอาจช่วยให้การชาร์จแบตเตอรี่อยู่ได้นานขึ้น และอาจส่งผลให้พื้นที่เก็บข้อมูลนานขึ้น อายุการใช้งานของอุปกรณ์ นอกจากนี้ ไฟฟ้าดับจะไม่ทำให้ข้อมูลเสียหายในอัตราที่สูงกว่า ที่เก็บข้อมูล '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 อินเทอร์เฟซแคช หรือ อินเทอร์เฟซไฟล์ 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);
});

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

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

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

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