การจัดการพื้นที่เก็บข้อมูล HTML5 แบบออฟไลน์

HTML5 เปิดตัว API พื้นที่เก็บข้อมูลมากมายที่ช่วยให้คุณจัดเก็บข้อมูลจำนวนมากไว้ในเครื่องของผู้ใช้ได้ เบราว์เซอร์ แต่โดยค่าเริ่มต้น พื้นที่ที่จัดสรรสำหรับแต่ละแอปจะจำกัดไว้เพียง 2-3 รายการ เมกะไบต์ Google Chrome ให้คุณขอโควต้าพื้นที่เก็บข้อมูลเพิ่ม ซึ่งเกินขีดจำกัดก่อนหน้านี้ 5 MB

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

เนื้อหา

1. ประเภทของพื้นที่เก็บข้อมูล
   1. ชั่วคราว
   2. ถาวร
   3. ไม่จำกัด
   4. การเปรียบเทียบประเภทพื้นที่เก็บข้อมูล
2. การจัดการโควต้า
   1. ค้นหาการใช้งานและความพร้อมใช้งานของพื้นที่เก็บข้อมูล
   2. ขอพื้นที่เก็บข้อมูลเพิ่ม
   3. รีเซ็ตโควต้าสำหรับการทดสอบ
3. เอกสารอ้างอิง API
   1. ค่าคงที่
   2. ภาพรวมของวิธีการ
   3. เมธอด
4. การพัฒนาในอนาคต

ประเภทพื้นที่เก็บข้อมูล

ใน 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 และ Application Cache

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

พื้นที่เก็บข้อมูลไม่จำกัด

พื้นที่เก็บข้อมูลไม่จำกัดจะคล้ายกับพื้นที่เก็บข้อมูลถาวร แต่จะใช้ได้เฉพาะกับแอป Chrome และ นามสกุล (ไฟล์ .crx) ขนาดของพื้นที่เก็บข้อมูลไม่จำกัดจะถูกจำกัดตามพื้นที่ที่พร้อมให้บริการเท่านั้น ในฮาร์ดไดรฟ์ของผู้ใช้ คุณขอสิทธิ์ unlimitedStorage ในไฟล์ Manifest ได้เพื่อ แอปหรือส่วนขยาย เมื่อติดตั้ง ผู้ใช้จะได้รับทราบถึงการอนุญาตที่ แอปหรือส่วนขยายนั้น เมื่อดำเนินการติดตั้งต่อ ผู้ใช้ได้ให้สิทธิ์โดยปริยายสำหรับ ทุกหน้าที่มี URL แสดงอยู่ในไฟล์ Manifest.json

ดูข้อมูลเพิ่มเติมได้ที่คู่มือนักพัฒนาซอฟต์แวร์ที่เกี่ยวข้องสำหรับแอปและส่วนขยาย

การเปรียบเทียบประเภทพื้นที่เก็บข้อมูล

ตารางต่อไปนี้อธิบายความแตกต่างของพื้นที่เก็บข้อมูลทั้ง 3 ประเภท

การจัดการโควต้าของคุณ

คุณสามารถใช้ 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); }
);
});

กำลังรีเซ็ตโควต้าสำหรับการทดสอบ

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

1. ป้อน chrome://settings/cookies ในแถบอเนกประสงค์ (แถบที่อยู่)
2. ค้นหาแอปของคุณ
3. เลือกแอป
4. คลิก X ทางด้านขวาของรายการที่เลือกที่ไฮไลต์

เอกสารอ้างอิง API

ส่วนนี้จะแสดงเมธอดของ API การจัดการโควต้า

ค่าคงที่

ค่าต่อไปนี้เป็นค่าคงที่ webkitStorageInfo ซึ่งระบุประเภทพื้นที่เก็บข้อมูล

ภาพรวมของวิธีการ

เมธอด

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: Callback ที่ไม่บังคับซึ่งส่งผ่านจำนวนไบต์ที่ได้รับ
• errorCallback: การแจ้งข้อผิดพลาด (ไม่บังคับ)

การพัฒนาในอนาคต

แผนคือการนำ API พื้นที่เก็บข้อมูลออฟไลน์สำหรับ HTML5 ทั้งหมด รวมถึง IndexedDB, แคชของแอปพลิเคชัน, ไฟล์ ระบบและ API อื่นๆ ที่อาจระบุ - ไม่เกินโควต้า API การจัดการ คุณจะจัดการการจัดสรรพื้นที่เก็บข้อมูลทั้งหมดได้