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

สำคัญ: Chrome จะเลิกรองรับแอป Chrome ในทุกแพลตฟอร์ม เบราว์เซอร์ Chrome และ Chrome เว็บสโตร์จะยังรองรับส่วนขยายต่อไป อ่านประกาศและดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลแอปของคุณ

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 และแคชของแอปพลิเคชัน

แอปพลิเคชันอาจมีโควต้าพื้นที่เก็บข้อมูลถาวรมากกว่าพื้นที่เก็บข้อมูลชั่วคราว แต่คุณต้องขอพื้นที่เก็บข้อมูลโดยใช้ 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 คุณต้องถามถึง unlimitedStorage อย่างชัดเจนในไฟล์ Manifest หากคุณไม่ระบุข้อกำหนดด้านพื้นที่เก็บข้อมูล Chrome จะจัดสรรพื้นที่เก็บข้อมูลให้แอปจากพูลพื้นที่เก็บข้อมูลชั่วคราวที่ใช้ร่วมกัน
พื้นที่เก็บข้อมูลสูงสุด	สูงสุด 20% ของพื้นที่ร่วม	มีขนาดใหญ่พอๆ กับพื้นที่ว่างในฮาร์ดไดรฟ์ ไม่มีพื้นที่เก็บข้อมูลร่วมแบบคงที่	มีขนาดใหญ่พอๆ กับพื้นที่ว่างในฮาร์ดไดรฟ์
กรณีการใช้งานที่แนะนำ	การแคช	แอปที่ทำงานแบบออฟไลน์หรือมีเนื้อหาจำนวนมาก	แอปที่ออกแบบให้ทำงานใน Google Chrome
API ที่ใช้ API ดังกล่าวได้	API แบบออฟไลน์ แคชของแอป ระบบไฟล์ IndexedDB WebSQL (เลิกใช้งานแล้วตั้งแต่วันที่ 18 พฤศจิกายน 2010) หมายเหตุ: API พื้นที่เก็บข้อมูลบนเว็บ เช่น LocalStorage และ SessionStorage มีดังนี้ 5 MB	API ระบบไฟล์	API แบบออฟไลน์ แคชของแอป ระบบไฟล์ IndexedDB WebSQL (เลิกใช้งานแล้ว) หมายเหตุ: 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); }
);
});

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

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

1. ป้อน chrome://settings/cookies ในแถบอเนกประสงค์ (แถบที่อยู่)
2. ค้นหาแอปของคุณ
3. เลือกแอป
4. คลิก 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 อื่นๆ ที่อาจระบุไว้ภายใต้ เครื่องมือจัดการโควต้า คุณจะจัดการการจัดสรรพื้นที่เก็บข้อมูลทั้งหมดร่วมกับบริการดังกล่าวได้