มาตรฐานพื้นที่เก็บข้อมูลจะกำหนด 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 คือการอนุญาตให้เว็บไซต์สร้างที่เก็บข้อมูลของพื้นที่เก็บข้อมูลหลายแหล่ง ซึ่งเบราว์เซอร์อาจเลือกที่จะลบที่เก็บข้อมูลแต่ละชุดแยกกันต่างหาก วิธีนี้จะช่วยให้นักพัฒนาซอฟต์แวร์สามารถระบุการจัดลำดับความสำคัญในการ นำเนื้อหาออก เพื่อให้แน่ใจว่าข้อมูลที่มีค่าที่สุดจะไม่ถูกลบ
ตัวอย่างกรณีการใช้งาน
เพื่อให้เห็นภาพว่าที่เก็บข้อมูลของพื้นที่เก็บข้อมูลมีประโยชน์ในด้านใด ให้ลองนึกภาพแอปพลิเคชันอีเมล และการที่แอปสูญเสียข้อความร่างที่ยังไม่ได้ส่งของผู้ใช้ซึ่งมีอยู่ในไคลเอ็นต์ก็คงจะไม่ได้ประโยชน์อะไรเช่นกัน ในทางตรงกันข้าม ถ้าผู้ใช้เก็บข้อมูลเหล่านี้ไว้ในเซิร์ฟเวอร์ ผู้ใช้อาจจะลบอีเมลในกล่องจดหมายที่เก่าที่สุดบางฉบับออกจากไคลเอ็นต์ได้ ถ้าเบราว์เซอร์ของผู้ใช้มีปริมาณพื้นที่เก็บข้อมูลมาก
![อินเทอร์เฟซแอป "อีเมล"](https://developer.chrome.com/static/docs/web-platform/storage-buckets/image/email-app-interface-174aa34e599a1.png?authuser=5&hl=th)
ใช้ 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 อินเทอร์เฟซแคช หรืออินเทอร์เฟซไฟล์ 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);
});
แก้ไขข้อบกพร่องของที่เก็บข้อมูลในเครื่องมือสำหรับนักพัฒนาเว็บ
ตรวจสอบที่เก็บข้อมูลของพื้นที่เก็บข้อมูลในแผนผังเฉพาะในส่วนแอปพลิเคชัน > พื้นที่เก็บข้อมูล