HTML5 เปิดตัว API พื้นที่เก็บข้อมูลจำนวนมากที่ช่วยให้คุณสามารถจัดเก็บข้อมูลจำนวนมากไว้ในเบราว์เซอร์ของผู้ใช้ แต่โดยค่าเริ่มต้น พื้นที่ที่จัดสรรสำหรับแต่ละแอปจะจำกัดไว้ที่ 2-3 เมกะไบต์ Google Chrome จะให้คุณขอโควต้าพื้นที่เก็บข้อมูลขนาดใหญ่ขึ้น ซึ่งเกินขีดจำกัดก่อนหน้านี้ซึ่งก็คือ 5 MB ได้
เอกสารนี้จะแนะนำให้คุณรู้จักแนวคิดพื้นฐานเกี่ยวกับประเภทพื้นที่เก็บข้อมูลที่ใช้ใน Chrome และอธิบายเกี่ยวกับ API การจัดการโควต้าเวอร์ชันทดลอง ซึ่งช่วยให้คุณจัดการโควต้าพื้นที่เก็บข้อมูลได้ เอกสารดังกล่าวมีสมมติฐานว่าคุณคุ้นเคยกับแนวคิดทั่วไปของพื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์อยู่แล้ว และทราบวิธีใช้ API ออฟไลน์
เนื้อหา
ประเภทพื้นที่เก็บข้อมูล
ใน Google Chrome คุณสามารถขอพื้นที่เก็บข้อมูลได้ 3 ประเภทดังนี้
เราอธิบายรายละเอียดเกี่ยวกับพื้นที่เก็บข้อมูลเหล่านี้ไว้ในส่วนต่อไปนี้ และเปรียบเทียบกับพื้นที่เก็บข้อมูลแต่ละประเภทในตารางด้านล่าง
พื้นที่เก็บข้อมูลชั่วคราว
พื้นที่เก็บข้อมูลชั่วคราวคือพื้นที่เก็บข้อมูลชั่วคราวที่พร้อมใช้งานกับเว็บแอปทั้งหมด Chrome จะให้พื้นที่เก็บข้อมูลชั่วคราวแก่แอปของคุณโดยอัตโนมัติ คุณจึงไม่ต้องขอการจัดสรร
แชร์สระว่ายน้ำ
ระบบจะใช้พื้นที่เก็บข้อมูลชั่วคราวร่วมกันกับเว็บแอปทั้งหมดที่ทำงานในเบราว์เซอร์
โดยพื้นที่เก็บข้อมูลที่ใช้ร่วมกันอาจคิดเป็น 1/3 ของพื้นที่ว่างในดิสก์ พื้นที่เก็บข้อมูลที่แอปใช้อยู่แล้วจะรวมอยู่ในการคำนวณพื้นที่เก็บข้อมูลร่วม กล่าวคือ จะคํานวณตาม
(available storage space + storage being used by apps) * .333
แต่ละแอปมีกลุ่มที่ใช้ร่วมกันได้สูงสุด 20% เช่น หากพื้นที่ในดิสก์ทั้งหมดที่ใช้ได้คือ 60 GB พื้นที่เก็บข้อมูลที่ใช้ร่วมกันจะเท่ากับ 20 GB และแอปจะมีพื้นที่เก็บข้อมูลได้สูงสุด 4 GB ซึ่งคำนวณจาก 20% (สูงสุด 4 GB) ของ 1/3 (สูงสุด 20 GB) ของพื้นที่ว่างในดิสก์ (60 GB)
ต้องการพื้นที่เพิ่มเติม
แม้ว่าคุณจะสืบค้นเกี่ยวกับปริมาณพื้นที่เก็บข้อมูลที่มีสำหรับแอปและจำนวนข้อมูลที่จัดเก็บไว้แล้วสำหรับแอปได้ แต่คุณจะไม่สามารถขอพื้นที่เก็บข้อมูลชั่วคราวเพิ่มได้ หากแอปเกินโควต้าที่จัดสรรไว้ ระบบจะแสดงข้อผิดพลาด
พื้นที่เก็บข้อมูลใกล้เต็มแล้ว
เมื่อเกินโควต้าพื้นที่เก็บข้อมูลสำหรับทั้งพูล ข้อมูลทั้งหมดที่จัดเก็บไว้สำหรับโฮสต์ที่มีการใช้งานล่าสุดจะถูกลบออก แต่เบราว์เซอร์จะไม่ล้างข้อมูลใน LocalStorage และ SessionStorage อย่างถาวร สำหรับข้อมูลที่เก็บไว้ใน API ออฟไลน์อื่นๆ เบราว์เซอร์จะลบข้อมูลทั้งหมดและไม่เพียงบางส่วน เพื่อไม่ให้ข้อมูลแอปเสียหายในรูปแบบที่ไม่คาดคิด
เนื่องจากแต่ละแอปมีพื้นที่เก็บข้อมูลร่วมสูงสุด 20% การลบจึงเป็นไปได้เฉพาะในกรณีที่ผู้ใช้กำลังใช้แอปออฟไลน์มากกว่า 5 แอป ซึ่งแต่ละแอปใช้พื้นที่เก็บข้อมูลสูงสุดเท่านั้น
แต่พื้นที่เก็บข้อมูลที่มีอยู่อาจลดลงเมื่อผู้ใช้เพิ่มไฟล์ลงในฮาร์ดไดรฟ์ เมื่อพื้นที่ในดิสก์ที่มีอยู่จำกัด (อย่าลืมว่าพูลที่ใช้ร่วมกันจะได้รับเพียงครึ่งหนึ่งของพื้นที่ว่างในดิสก์ปัจจุบัน) เบราว์เซอร์จะลบข้อมูลทั้งหมดที่เก็บไว้สำหรับโฮสต์ที่มีการใช้งานน้อยที่สุด
พื้นที่เก็บข้อมูลถาวร
พื้นที่เก็บข้อมูลถาวรคือพื้นที่เก็บข้อมูลที่คงอยู่ในเบราว์เซอร์จนกว่าผู้ใช้จะล้างพื้นที่เก็บข้อมูล โดยจะใช้ได้กับแอปที่ใช้ File System API เท่านั้น แต่ในที่สุดแล้วจะพร้อมใช้งานกับ API ออฟไลน์อื่นๆ เช่น IndexedDB และแคชของแอปพลิเคชัน
แอปพลิเคชันอาจมีโควต้าพื้นที่เก็บข้อมูลถาวรมากกว่าพื้นที่เก็บข้อมูลชั่วคราว แต่คุณต้องขอพื้นที่เก็บข้อมูลโดยใช้ API การจัดการโควต้า และผู้ใช้ต้องให้สิทธิ์คุณในการใช้พื้นที่เพิ่มเติม Chrome จะแสดงแถบข้อมูลที่แจ้งให้ผู้ใช้มอบพื้นที่เก็บข้อมูลในเครื่องให้กับแอป
พื้นที่เก็บข้อมูลไม่จำกัด
พื้นที่เก็บข้อมูลไม่จำกัดจะคล้ายกับพื้นที่เก็บข้อมูลถาวร แต่จะใช้ได้เฉพาะกับแอปและส่วนขยาย Chrome (ไฟล์ .crx) เท่านั้น ขนาดของพื้นที่เก็บข้อมูลไม่จำกัดถูกจำกัดโดยพื้นที่ว่างในฮาร์ดไดรฟ์ของผู้ใช้เท่านั้น คุณสามารถขอสิทธิ์ unlimitedStorage
ในไฟล์ Manifest สำหรับแอปหรือส่วนขยาย เมื่อติดตั้ง ระบบจะแจ้งให้ผู้ใช้ทราบถึงสิทธิ์ที่แอปหรือส่วนขยายกำหนด เมื่อดำเนินการติดตั้งต่อ ผู้ใช้จะให้สิทธิ์แก่หน้าเว็บทุกหน้าที่มี URL แสดงอยู่ในไฟล์ Manifest.json โดยนัย
หากต้องการเรียนรู้เพิ่มเติม โปรดดูคู่มือนักพัฒนาซอฟต์แวร์ที่เกี่ยวข้องสำหรับแอปและส่วนขยาย
การเปรียบเทียบประเภทพื้นที่เก็บข้อมูล
ตารางต่อไปนี้อธิบายความแตกต่างระหว่างพื้นที่เก็บข้อมูลทั้ง 3 ประเภท
พื้นที่เก็บข้อมูลชั่วคราว | พื้นที่เก็บข้อมูลถาวร | พื้นที่เก็บข้อมูลไม่จำกัด | |
---|---|---|---|
รายละเอียดพื้นฐาน | พื้นที่เก็บข้อมูลชั่วคราวที่พร้อมใช้งานกับเว็บแอปทั้งหมด เป็นแบบอัตโนมัติและไม่จำเป็นต้องร้องขอ | พื้นที่เก็บข้อมูลถาวรที่ต้องขอผ่าน API การจัดการโควต้าและให้สิทธิ์โดยผู้ใช้ | พื้นที่เก็บข้อมูลถาวรสำหรับส่วนขยายและแอป Chrome ซึ่งมีการกำหนดไว้ในไฟล์ Manifest และผู้ใช้ต้องเป็นผู้ให้สิทธิ์ |
ความพร้อมใช้งาน | เว็บแอปทั้งหมด | เว็บแอปทั้งหมด | ใช้กับส่วนขยาย Chrome เท่านั้น รวมถึงเว็บแอปที่โฮสต์และติดตั้งไว้ |
สิทธิ์ | ไม่มี ซึ่งคุณจะใช้ได้โดยไม่ต้องขออย่างชัดแจ้ง | คุณต้องขอพื้นที่เก็บข้อมูลเพิ่มโดยใช้ API การจัดการโควต้า | คุณสามารถขอสิทธิ์ unlimitedStorage ในไฟล์ Manifest สำหรับแอปหรือส่วนขยาย |
ประสบการณ์ของผู้ใช้ในการใช้งานครั้งแรก | ผู้ใช้จะไม่เห็น แค่แอปทำงาน | Chrome จะแสดงแถบข้อมูลที่แจ้งให้ผู้ใช้ยอมรับหรือปฏิเสธคำขอพื้นที่เก็บข้อมูล แต่หากโควต้าที่คุณขอน้อยกว่าการจัดสรรในปัจจุบันของแอป ระบบจะไม่แสดงข้อความแจ้ง โควต้าที่มากกว่าจะยังคงอยู่ | เมื่อติดตั้ง ระบบจะแจ้งให้ผู้ใช้ทราบถึงสิทธิ์ที่แอปหรือส่วนขยายกำหนด เมื่อดำเนินการติดตั้งต่อ ผู้ใช้จะให้สิทธิ์แก่หน้าเว็บทุกหน้าที่มี URL แสดงอยู่ในไฟล์ Manifest.json สำหรับแอปหรือส่วนขยายโดยปริยาย |
ประสบการณ์ของผู้ใช้ในคำขอพื้นที่เก็บข้อมูลเพิ่มในครั้งต่อๆ ไป | ไม่เกี่ยวข้อง คุณจะขอพื้นที่เก็บข้อมูลชั่วคราวเพิ่มไม่ได้ | Chrome จะแจ้งให้ผู้ใช้อีกครั้ง
| Chrome จะไม่แสดงข้อความแจ้งให้ผู้ใช้หลังการติดตั้ง ไม่ว่าแอปหรือส่วนขยายจะส่งคำขอเพิ่มโควต้าหรือไม่ก็ตาม |
ความต่อเนื่องของข้อมูล | เป็นค่าชั่วคราว เบราว์เซอร์จะลบข้อมูลดังกล่าวได้ | ถาวร เบราว์เซอร์จะไม่ลบข้อมูลจนกว่าผู้ใช้จะแจ้งให้ดำเนินการ ข้อมูลจะใช้ได้ในการเข้าถึงครั้งต่อๆ ไป อย่าคิดเองว่าข้อมูลนั้นเป็นแบบถาวร เนื่องจากผู้ใช้สามารถลบออกได้ | เท่ากับพื้นที่เก็บข้อมูลถาวร
|
พื้นที่เก็บข้อมูลเริ่มต้น | สูงสุด 20% ของพื้นที่ร่วม | 0 MB คุณต้องขอพื้นที่เก็บข้อมูลที่เฉพาะเจาะจงอย่างชัดแจ้ง | 0 MB คุณต้องถามถึง หากคุณไม่ระบุข้อกำหนดด้านพื้นที่เก็บข้อมูล Chrome จะจัดสรรพื้นที่เก็บข้อมูลให้แอปจากพูลพื้นที่เก็บข้อมูลชั่วคราวที่ใช้ร่วมกัน |
พื้นที่เก็บข้อมูลสูงสุด | สูงสุด 20% ของพื้นที่ร่วม | มีขนาดใหญ่พอๆ กับพื้นที่ว่างในฮาร์ดไดรฟ์ ไม่มีพื้นที่เก็บข้อมูลร่วมแบบคงที่ | มีขนาดใหญ่พอๆ กับพื้นที่ว่างในฮาร์ดไดรฟ์ |
กรณีการใช้งานที่แนะนำ | การแคช | แอปที่ทำงานแบบออฟไลน์หรือมีเนื้อหาจำนวนมาก | แอปที่ออกแบบให้ทำงานใน Google Chrome |
API ที่ใช้ API ดังกล่าวได้ | API แบบออฟไลน์
หมายเหตุ: API พื้นที่เก็บข้อมูลบนเว็บ เช่น LocalStorage และ SessionStorage มีดังนี้ 5 MB | API ระบบไฟล์ | API แบบออฟไลน์
หมายเหตุ: API พื้นที่เก็บข้อมูลบนเว็บ เช่น LocalStorage และ SessionStorage มีดังนี้ 5 MB |
การจัดการโควต้าของคุณ
การใช้ API การจัดการโควต้าที่เปิดตัวใน Chrome 13 ช่วยให้คุณสามารถทำสิ่งต่อไปนี้
- การใช้งานและความพร้อมใช้งานของพื้นที่เก็บข้อมูลคำค้นหา
- ขอพื้นที่เก็บข้อมูลเพิ่ม
- รีเซ็ตโควต้าสำหรับการทดสอบ
มีการใช้งาน API กับออบเจ็กต์ส่วนกลาง window.webkitStorageInfo
โปรดดูเอกสารอ้างอิงในส่วนถัดไป
สอบถามการใช้งานและความพร้อมใช้งานของพื้นที่เก็บข้อมูล
หากต้องการค้นหาขนาดพื้นที่เก็บข้อมูลที่ใช้ และพื้นที่ว่างที่เหลือสำหรับโฮสต์ โปรดเรียกใช้ queryUsageAndQuota()
ด้วยค่าต่อไปนี้
- ประเภทพื้นที่เก็บข้อมูลที่ต้องการตรวจสอบ
- ติดต่อกลับสำเร็จ
การใช้งานที่ API รายงานอาจไม่ตรงกับขนาดจริงของข้อมูลผู้ใช้ เนื่องจากพื้นที่เก็บข้อมูลแต่ละแห่งอาจต้องเพิ่มไบต์ในการจัดเก็บข้อมูลเมตา นอกจากนี้ การอัปเดตสถานะอาจล่าช้า ซึ่งส่งผลให้ API ไม่แสดงสถานะของพื้นที่เก็บข้อมูลล่าสุด
ข้อมูลโค้ดต่อไปนี้แสดงวิธีถามเกี่ยวกับพื้นที่เก็บข้อมูล
// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
function(usedBytes, grantedBytes) {
console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
},
function(e) { console.log('Error', e); }
);
หากต้องการขอสถานะของพื้นที่เก็บข้อมูลถาวร เพียงแทนที่ webkitStorageInfo.TEMPORARY
ด้วย webkitStorageInfo.PERSISTENT
enum อยู่ในออบเจ็กต์ window
(เนมสเปซสากล) ด้วย คุณจึงใช้ window.PERSISTENT
และ window.TEMPORARY
ได้ด้วย
ต้องการพื้นที่เก็บข้อมูลเพิ่ม
คุณไม่จําเป็นต้องขอพื้นที่เก็บข้อมูลชั่วคราวเพิ่มเติมเนื่องจากการจัดสรรเป็นแบบอัตโนมัติ และจะใช้งานเกินขีดจำกัดสูงสุดไม่ได้ (ตามที่อธิบายไว้ในตาราง)
สำหรับพื้นที่เก็บข้อมูลถาวรสำหรับ File System API โควต้าเริ่มต้นคือ 0 คุณจึงต้องขอพื้นที่เก็บข้อมูลสำหรับแอปพลิเคชันอย่างชัดแจ้ง โทรหา requestQuota()
ด้วยข้อมูลต่อไปนี้
- ประเภทพื้นที่เก็บข้อมูล
- ขนาด
- ติดต่อกลับสำเร็จ
เหตุการณ์ต่อไปนี้จะเกิดขึ้นโดยขึ้นอยู่กับสิ่งที่คุณขอ
- หากคุณขอโควต้าเพิ่ม เบราว์เซอร์จะแสดงแถบข้อมูลแก่ผู้ใช้และแจ้งให้ผู้ใช้อนุญาตหรือปฏิเสธสิทธิ์ในการเพิ่มโควต้า ในบางกรณี คำขออาจถูกปฏิเสธโดยไม่มีการแจ้งเตือน และจะแสดงโควต้าปัจจุบันหรือโควต้าที่น้อยกว่า
- หากจำนวนโควต้าที่คุณขอน้อยกว่าการจัดสรรในปัจจุบันของแอป ระบบจะไม่แสดงข้อความแจ้ง
- หากขอพื้นที่เก็บข้อมูลเกินกว่าที่ได้รับอนุญาต คุณจะได้รับข้อผิดพลาด (
QUOTA_EXCEEDED_ERR
) - หากคุณเรียกใช้
requestQuota()
อีกครั้งหลังจากที่ผู้ใช้ให้สิทธิ์แล้ว จะไม่มีสิ่งใดเกิดขึ้น จึงไม่จำเป็นต้องเรียกใช้เมธอดนั้นอีก
วิธีการขอพื้นที่เก็บข้อมูลเพิ่มมีดังนี้
// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB
navigator.webkitPersistentStorage.requestQuota (
requestedBytes, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) { console.log('Error', e); }
);
});
กำลังรีเซ็ตโควต้าสำหรับการทดสอบ
เมื่อทดสอบพื้นที่เก็บข้อมูลในแอป คุณอาจต้องการล้างข้อมูลที่จัดเก็บไว้เพื่อจะได้ทดสอบการจัดการโควต้าในแอปอีกครั้ง วิธีการมีดังนี้
- ป้อน
chrome://settings/cookies
ในแถบอเนกประสงค์ (แถบที่อยู่) - ค้นหาแอปของคุณ
- เลือกแอป
- คลิก X ทางด้านขวาของรายการที่เลือกที่ไฮไลต์
เอกสารอ้างอิง API
ส่วนนี้ระบุเมธอดของ Transaction Management API
ค่าคงที่
ต่อไปนี้เป็นค่าคงที่ webkitStorageInfo
ซึ่งระบุประเภทพื้นที่เก็บข้อมูล
ค่าคงที่ | ค่า | คำอธิบาย |
---|---|---|
TEMPORARY | 0 | พื้นที่เก็บข้อมูลชั่วคราว |
PERSISTENT | 1 | พื้นที่เก็บข้อมูลถาวร |
ภาพรวมของวิธีการ
queryUsageAndQuota |
requestQuota |
วิธีการ
queryUsageAndQuota
ตรวจสอบขนาดของพื้นที่เก็บข้อมูลที่ใช้ และพื้นที่ว่างที่เหลือสำหรับโฮสต์
// you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
successCallback,
errorCallback);
successCallback
: โค้ดเรียกกลับที่ไม่บังคับซึ่งมีพารามิเตอร์ 2 รายการ- จำนวนไบต์ปัจจุบันที่แอปใช้
- จำนวนไบต์ที่เหลือในโควต้า
errorCallback
: (ไม่บังคับ) โค้ดเรียกกลับ
requestQuota
ขอพื้นที่เก็บข้อมูลเพิ่ม เบราว์เซอร์จะแสดงแถบข้อมูลเพื่อแจ้งให้ผู้ใช้มอบหรือปฏิเสธสิทธิ์ในพื้นที่เก็บข้อมูลเพิ่มเติมให้แก่แอป
// you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
newQuotaInBytes,
quotaCallback,
errorCallback);
พารามิเตอร์
newQuotaInBytes
: จำนวนไบต์ที่ต้องการในโควต้าพื้นที่เก็บข้อมูลsuccessCallback
: โค้ดเรียกกลับที่ไม่บังคับซึ่งส่งจำนวนไบต์ที่ได้รับerrorCallback
: (ไม่บังคับ) โค้ดเรียกกลับ
การพัฒนาในอนาคต
แผนของเราคือการใส่ API พื้นที่เก็บข้อมูลออฟไลน์ของ HTML5 ทั้งหมด รวมถึง IndexedDB, แคชของแอปพลิเคชัน, ระบบไฟล์ และ API อื่นๆ ที่อาจระบุไว้ภายใต้ เครื่องมือจัดการโควต้า คุณจะจัดการการจัดสรรพื้นที่เก็บข้อมูลทั้งหมดร่วมกับบริการดังกล่าวได้