มีตัวเลือกต่างๆ มากมายสำหรับการจัดเก็บข้อมูลในเบราว์เซอร์ ตัวเลือกใดเหมาะกับความต้องการของคุณที่สุด
การเชื่อมต่ออินเทอร์เน็ตอาจมีประสิทธิภาพไม่เสถียรหรือใช้ไม่ได้ได้ทุกที่ทุกเวลา จึงเป็นเหตุผลที่ทำให้การรองรับแบบออฟไลน์และประสิทธิภาพที่เชื่อถือได้เป็นฟีเจอร์ทั่วไปในProgressive Web App แม้จะใช้งานระบบไร้สายได้อย่างสมบูรณ์แบบ แต่การใช้การแคชและเทคนิคการจัดเก็บข้อมูลอื่นๆ อย่างรอบคอบ ก็ช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก การแคชทรัพยากรแอปพลิเคชันแบบคงที่ (HTML, JavaScript, CSS, รูปภาพ ฯลฯ) และข้อมูล (ข้อมูลผู้ใช้ บทความข่าว ฯลฯ) นั้นทำได้หลายวิธี แต่โซลูชันใดคือโซลูชันที่ดีที่สุด คุณจะจัดเก็บได้มากแค่ไหน คุณจะป้องกันไม่ให้วิดีโอถูกนำออกได้อย่างไร
ฉันควรใช้อะไร
คำแนะนำทั่วไปสำหรับการจัดเก็บทรัพยากรมีดังนี้
- สำหรับทรัพยากรเครือข่ายที่จำเป็นในการโหลดแอปและเนื้อหาที่อิงตามไฟล์ ให้ใช้ Cache Storage API (เป็นส่วนหนึ่งของโปรแกรมทำงานของบริการ)
- สําหรับข้อมูลอื่นๆ ให้ใช้ IndexedDB (พร้อมด้วย promises Wrapper)
เบราว์เซอร์ที่ทันสมัยทุกเบราว์เซอร์รองรับ IndexedDB และ Cache Storage API
ทั้ง 2 โค้ดไม่พร้อมกันและจะไม่บล็อกเทรดหลัก ซึ่งเข้าถึงได้จากออบเจ็กต์ window, Web Worker และ Service Worker ทำให้คุณใช้งานได้ทุกที่ในโค้ด
แล้วกลไกการเก็บข้อมูลอื่นๆ ล่ะ
มีกลไกของพื้นที่เก็บข้อมูลอื่นๆ มากมายในเบราว์เซอร์ แต่มีข้อจำกัดในการใช้งานและอาจทำให้เกิดปัญหาด้านประสิทธิภาพที่สำคัญ
SessionStorage เป็นแท็บที่เฉพาะเจาะจงและกำหนดขอบเขตตามอายุการใช้งานของแท็บ อาจมีประโยชน์ในการจัดเก็บข้อมูลเฉพาะเซสชันจำนวนไม่มาก เช่น คีย์ IndexedDB ควรใช้อย่างระมัดระวังเนื่องจากมีความเกี่ยวข้องพร้อมกันและจะบล็อกเทรดหลัก จำกัดขนาดได้ไม่เกิน 5 MB และมีสตริงได้เท่านั้น เนื่องจากโปรแกรมทำงานของบริการ หรือ Service Worker ไม่สามารถเข้าถึงแท็บได้
ควรหลีกเลี่ยง LocalStorage เนื่องจากเป็นแบบซิงโครนัสและจะบล็อกเทรดหลัก ถูกจำกัดไว้ที่ประมาณ 5 MB และมีได้เฉพาะสตริงเท่านั้น ผู้ปฏิบัติงานเว็บหรือผู้ทำงานของบริการไม่สามารถเข้าถึง LocalStorage ได้
มีการใช้งานคุกกี้ แต่ไม่ควรใช้เป็นพื้นที่เก็บข้อมูล คุกกี้จะส่งไปพร้อมกับคำขอ HTTP ทุกรายการ ดังนั้นการจัดเก็บข้อมูลที่มากกว่าปริมาณน้อยจะเพิ่มขนาดของคำขอเว็บทุกรายการอย่างมาก ซึ่งเป็นเครื่องมือที่ทำงานพร้อมกันและไม่สามารถเข้าถึงได้จากผู้ปฏิบัติงานบนเว็บ คุกกี้จะถูกจำกัดไว้ที่สตริงเท่านั้น เช่นเดียวกับ LocalStorage และ SessionStorage
File System API และ FileWriter API มีวิธีอ่านและเขียนไฟล์ลงในระบบไฟล์ที่ทำแซนด์บ็อกซ์ แม้ว่าจะเป็นแบบไม่พร้อมกัน แต่เราไม่แนะนำเนื่องจากใช้ได้เฉพาะในเบราว์เซอร์แบบ Chromium เท่านั้น
File System Access API ออกแบบมาเพื่อช่วยให้ผู้ใช้อ่านและแก้ไขไฟล์ในระบบไฟล์ในเครื่องได้โดยง่าย ผู้ใช้ต้องให้สิทธิ์ก่อน หน้าเว็บจึงจะอ่านหรือเขียนไปยังไฟล์ในเครื่องได้ และสิทธิ์จะไม่คงอยู่ในเซสชันต่างๆ
ไม่ควรใช้ WebSQL และควรย้ายข้อมูลการใช้งานที่มีอยู่ไปยัง IndexedDB นำการสนับสนุนออกจากเบราว์เซอร์หลักเกือบทั้งหมดแล้ว W3C หยุดการรักษาข้อกำหนดเฉพาะของ Web SQL ในปี 2010 โดยไม่มีแผนที่จะอัปเดตเพิ่มเติม
คุณไม่ควรใช้แคชของแอปพลิเคชัน และระบบควรย้ายข้อมูลการใช้งานที่มีอยู่ไปยังโปรแกรมทำงานของบริการและ Cache API เราได้เลิกใช้งานการรองรับออกจากเบราว์เซอร์แล้วในอนาคต
ฉันจะเก็บข้อมูลได้เท่าไร
โดยสรุปคือมาก อย่างน้อย 200-200 เมกะไบต์ และอาจมีขนาดหลายร้อยกิกะไบต์ขึ้นไป การใช้งานเบราว์เซอร์จะแตกต่างกันไป แต่ปริมาณพื้นที่เก็บข้อมูลที่ใช้ได้จะขึ้นอยู่กับปริมาณพื้นที่เก็บข้อมูลที่ใช้ได้ในอุปกรณ์
- Chrome ช่วยให้เบราว์เซอร์ใช้พื้นที่ในดิสก์ได้ถึง 80% จากทั้งหมด ต้นทางจะใช้พื้นที่ในดิสก์ทั้งหมดได้ถึง 60% จากพื้นที่ในดิสก์ทั้งหมด คุณใช้ StorageManager API เพื่อกำหนดโควต้าสูงสุดที่ใช้ได้ เบราว์เซอร์อื่นๆ ที่ใช้ Chromium อาจแตกต่างออกไป
- ในโหมดไม่ระบุตัวตน Chrome จะลดปริมาณพื้นที่เก็บข้อมูลที่ต้นทางใช้ได้ให้เหลือประมาณ 5% ของพื้นที่ในดิสก์ทั้งหมด
- หากผู้ใช้เปิดใช้ "ล้างคุกกี้และข้อมูลเว็บไซต์เมื่อคุณปิดหน้าต่างทั้งหมด" ใน Chrome โควต้าพื้นที่เก็บข้อมูลจะลดลงอย่างมากเมื่อไม่เกิน 300 MB
- ดูรายละเอียดเกี่ยวกับการติดตั้งใช้งาน Chrome ได้ที่ PR #3896
- Internet Explorer 10 ขึ้นไปสามารถเก็บข้อมูลได้ถึง 250 MB และจะแจ้งผู้ใช้เมื่อมีการใช้เกิน 10 MB
- Firefox ช่วยให้เบราว์เซอร์ใช้พื้นที่ว่างในดิสก์ได้ถึง 50% กลุ่ม eTLD+1 (เช่น
example.com,www.example.comและfoo.bar.example.com) อาจใช้สูงสุด 2 GB คุณสามารถใช้ StorageManager API เพื่อดูว่ายังมีพื้นที่ว่างเหลืออยู่เท่าใด - Safari (ทั้งเดสก์ท็อปและอุปกรณ์เคลื่อนที่) อนุญาตให้ใช้ได้ประมาณ 1 GB เมื่อถึงขีดจำกัดแล้ว Safari จะแจ้งให้ผู้ใช้เพิ่มขีดจำกัดเป็น 200 MB เราไม่พบเอกสารอย่างเป็นทางการใดๆ เกี่ยวกับเรื่องนี้
- หากเพิ่ม PWA บนหน้าจอหลักของ Safari บนอุปกรณ์เคลื่อนที่ ดูเหมือนว่าจะเป็นการสร้างคอนเทนเนอร์พื้นที่เก็บข้อมูลใหม่ แต่จะไม่มีการแชร์ระหว่าง PWA กับ Safari บนอุปกรณ์เคลื่อนที่ เมื่อ PWA ที่ติดตั้งใช้โควต้าถึงโควต้าแล้ว จะไม่มีวิธีขอพื้นที่เก็บข้อมูลเพิ่มเติมเลย
ก่อนหน้านี้ หากเว็บไซต์มีข้อมูลที่เก็บไว้เกินเกณฑ์ที่กำหนด เบราว์เซอร์จะแจ้งให้ผู้ใช้ให้สิทธิ์เพื่อใช้ข้อมูลเพิ่มเติม ตัวอย่างเช่น หากต้นทางใช้พื้นที่มากกว่า 50 MB เบราว์เซอร์จะแจ้งให้ผู้ใช้อนุญาตให้จัดเก็บได้สูงสุด 100 MB แล้วถามอีกครั้งทีละ 50 MB
ปัจจุบันเบราว์เซอร์รุ่นใหม่ๆ ส่วนใหญ่จะไม่แสดงข้อความแจ้งให้ผู้ใช้และจะอนุญาตให้เว็บไซต์ใช้โควต้าจนเต็ม ข้อยกเว้นจะเป็น Safari ซึ่ง แจ้งเตือนเมื่อเกินโควต้าพื้นที่เก็บข้อมูล แล้วขอสิทธิ์เพิ่มโควต้าที่จัดสรร หากต้นทางพยายามใช้เกินโควต้าที่จัดสรรไว้ ความพยายามเขียนข้อมูลต่อไปก็จะล้มเหลว
ฉันจะตรวจสอบปริมาณพื้นที่เก็บข้อมูลที่มีอยู่ได้อย่างไร
เบราว์เซอร์จำนวนมากจะใช้ StorageManager API เพื่อระบุปริมาณพื้นที่เก็บข้อมูลที่ใช้ได้สําหรับต้นทางและปริมาณพื้นที่เก็บข้อมูลที่ใช้งาน โดยจะรายงานจำนวนไบต์ทั้งหมดที่ใช้โดย IndexedDB และ Cache API และช่วยให้คำนวณพื้นที่เก็บข้อมูลที่เหลืออยู่โดยประมาณได้
if (navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate();
// quota.usage -> Number of bytes used.
// quota.quota -> Maximum number of bytes available.
const percentageUsed = (quota.usage / quota.quota) * 100;
console.log(`You've used ${percentageUsed}% of the available storage.`);
const remaining = quota.quota - quota.usage;
console.log(`You can write up to ${remaining} more bytes.`);
}
ยังไม่ได้ใช้งาน StorageManager ในเบราว์เซอร์ทั้งหมด คุณจึงต้องใช้ฟีเจอร์ให้ตรวจหาก่อนใช้งาน คุณยังคงต้องพบข้อผิดพลาดเกี่ยวกับโควต้ามากเกินไป (ดูด้านล่าง) ถึงแม้ว่าจะใช้งานได้ ในบางกรณี เป็นไปได้ที่โควต้าที่มีอยู่จะใช้เกินปริมาณพื้นที่เก็บข้อมูลที่มีอยู่จริง
ตรวจสอบ
ในระหว่างการพัฒนา คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์เพื่อตรวจสอบพื้นที่เก็บข้อมูลประเภทต่างๆ และล้างข้อมูลที่จัดเก็บไว้ทั้งหมดได้อย่างง่ายดาย
เราได้เพิ่มฟีเจอร์ใหม่ใน Chrome 88 ซึ่งจะช่วยให้คุณลบล้างโควต้าพื้นที่เก็บข้อมูลของเว็บไซต์ในแผงพื้นที่เก็บข้อมูลได้ ฟีเจอร์นี้ช่วยให้คุณจำลองอุปกรณ์ต่างๆ และทดสอบลักษณะการทำงานของแอปในสภาพแวดล้อมที่มีดิสก์ต่ำได้ ไปที่แอปพลิเคชัน แล้วไปที่พื้นที่เก็บข้อมูล แล้วเปิดใช้ช่องทำเครื่องหมายจำลองโควต้าพื้นที่เก็บข้อมูลที่กำหนดเอง จากนั้นป้อนหมายเลขที่ถูกต้องเพื่อจำลองโควต้าพื้นที่เก็บข้อมูล
ระหว่างที่อ่านบทความนี้ ฉันได้เขียนเครื่องมือง่ายๆ เพื่อพยายามใช้พื้นที่เก็บข้อมูลให้ได้มากที่สุดอย่างรวดเร็ว ซึ่งเป็นวิธีที่ง่ายและรวดเร็วในการทดสอบกับกลไกการเก็บข้อมูลต่างๆ และดูว่าจะเกิดอะไรขึ้นเมื่อคุณใช้โควต้าทั้งหมด
วิธีจัดการกับการใช้พื้นที่เก็บข้อมูลเกินโควต้า
คุณควรทำอย่างไรเมื่อใช้เกินโควต้า สิ่งสำคัญที่สุดคือ คุณควรตรวจจับและจัดการกับข้อผิดพลาดในการเขียนเสมอ ไม่ว่าจะเป็น QuotaExceededError หรือปัญหาอื่น จากนั้นตัดสินใจว่าจะจัดการอย่างไร ขึ้นอยู่กับการออกแบบแอปของคุณ
เช่น ลบเนื้อหาที่ไม่ได้เข้าถึงเป็นเวลานาน นำข้อมูลตามขนาดออก หรือเสนอวิธีให้ผู้ใช้เลือกสิ่งที่ต้องการลบ
ทั้ง IndexedDB และ Cache API จะส่ง DOMError ที่มีชื่อว่า QuotaExceededError เมื่อคุณใช้เกินโควต้าที่มีอยู่
IndexedDB
หากต้นทางเกินโควต้า การเขียนไปยัง IndexedDB จะล้มเหลว ระบบจะเรียกใช้เครื่องจัดการ onabort() ของธุรกรรมซึ่งผ่านเหตุการณ์
เหตุการณ์จะมี DOMException อยู่ในพร็อพเพอร์ตี้ข้อผิดพลาด การตรวจสอบข้อผิดพลาด name จะแสดงผล QuotaExceededError
const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
const error = event.target.error; // DOMException
if (error.name == 'QuotaExceededError') {
// Fallback code goes here
}
};
API แคช
หากต้นทางเกินโควต้า การพยายามเขียนไปยัง Cache API จะปฏิเสธด้วย QuotaExceededError DOMException
try {
const cache = await caches.open('my-cache');
await cache.add(new Request('/sample1.jpg'));
} catch (err) {
if (error.name === 'QuotaExceededError') {
// Fallback code goes here
}
}
การปลดออกทำงานอย่างไร
พื้นที่เก็บข้อมูลบนเว็บจะแบ่งออกเป็น 2 ที่เก็บข้อมูล ได้แก่ "ความพยายามอย่างดีที่สุด" และ "ถาวร" ความพยายามอย่างดีที่สุดหมายความว่าเบราว์เซอร์สามารถล้างพื้นที่เก็บข้อมูลได้โดยไม่รบกวนผู้ใช้ แต่มีความคงทนน้อยกว่าสำหรับข้อมูลระยะยาวหรือข้อมูลที่สำคัญ ระบบจะไม่ล้างพื้นที่เก็บข้อมูลถาวรโดยอัตโนมัติเมื่อพื้นที่เก็บข้อมูลเหลือน้อย ผู้ใช้ต้องล้างพื้นที่เก็บข้อมูลนี้ด้วยตนเอง (ผ่านการตั้งค่าเบราว์เซอร์)
โดยค่าเริ่มต้น ข้อมูลของเว็บไซต์ (รวมถึง IndexedDB, Cache API ฯลฯ) จะจัดอยู่ในหมวดหมู่ที่มีความพยายามมากที่สุด ซึ่งหมายความว่าหากเว็บไซต์ไม่ได้ขอพื้นที่เก็บข้อมูลถาวร เบราว์เซอร์อาจนำข้อมูลเว็บไซต์ออกตามที่เห็นสมควร เช่น เมื่อพื้นที่เก็บข้อมูลของอุปกรณ์เหลือน้อย
นโยบายการปลดออกเพื่อให้ดำเนินการได้ดีที่สุดมีดังนี้
- เบราว์เซอร์แบบ Chromium จะเริ่มนำออกข้อมูลเมื่อเบราว์เซอร์เต็ม โดยจะล้างข้อมูลเว็บไซต์ทั้งหมดจากต้นทางที่ใช้ล่าสุดน้อยที่สุดก่อน และล้างข้อมูลเว็บไซต์ในลำดับถัดไปจนกว่าเบราว์เซอร์จะไม่เกินขีดจำกัดแล้ว
- ทั้งนี้ Internet Explorer 10 ขึ้นไปจะไม่นำข้อมูลออก แต่จะป้องกันไม่ให้ระบบเขียนข้อมูลต้นทางอีกต่อไป
- Firefox จะเริ่มนำออกข้อมูลออกเมื่อพื้นที่ในดิสก์ที่มีอยู่เต็ม โดยล้างข้อมูลเว็บไซต์ทั้งหมดจากต้นทางที่ใช้ล่าสุดน้อยที่สุดก่อน แล้วจึงล้างข้อมูลเว็บไซต์จนกระทั่งเบราว์เซอร์ไม่เกินขีดจำกัดแล้ว
- ก่อนหน้านี้ Safari ไม่ได้นำข้อมูลออก แต่เพิ่งใช้ขีดจำกัดระยะเวลา 7 วันใหม่ในพื้นที่เก็บข้อมูลที่เขียนได้ทั้งหมด (ดูด้านล่าง)
ตั้งแต่ iOS และ iPadOS 13.4 และ Safari 13.1 ใน macOS จะมีพื้นที่เก็บข้อมูลที่เขียนสคริปต์ได้ทั้งหมดสูงสุด 7 วัน ซึ่งรวมถึง IndexedDB, การลงทะเบียนผู้ปฏิบัติงานของบริการ และ Cache API ซึ่งหมายความว่า Safari จะนำเนื้อหาทั้งหมดออกจากแคชหลังจากใช้ Safari เป็นเวลา 7 วันหากผู้ใช้ไม่ได้โต้ตอบกับเว็บไซต์ นโยบายการปลดนี้ไม่มีผลกับ PWA ที่ติดตั้งไว้ซึ่งเพิ่มลงในหน้าจอหลัก โปรดดูรายละเอียดทั้งหมดที่การบล็อกคุกกี้ของบุคคลที่สามแบบเต็มและอื่นๆ ในบล็อก WebKit
โบนัส: เหตุใดจึงควรใช้ Wrapper สำหรับ IndexedDB
IndexedDB เป็น API ระดับต่ำที่ต้องมีการตั้งค่าอย่างมากก่อนใช้งาน ซึ่งอาจยุ่งยากในการจัดเก็บข้อมูลอย่างง่าย API แบบใช้สัญญาจ้างสมัยใหม่แตกต่างจาก API สมัยใหม่ส่วนใหญ่ตรงที่ยึดตามเหตุการณ์ Wrapper ที่สัญญาอย่าง idb สำหรับ IndexedDB จะซ่อนคุณลักษณะที่มีประสิทธิภาพบางส่วน แต่ที่สำคัญกว่านั้นคือ ซ่อนเครื่องจักรที่ซับซ้อน (เช่น ธุรกรรม การกำหนดเวอร์ชันสคีมา) ที่มาพร้อมกับไลบรารี IndexedDB
บทสรุป
หมดยุคที่พื้นที่เก็บข้อมูลมีจำกัดและกระตุ้นให้ผู้ใช้จัดเก็บข้อมูลมากขึ้นเรื่อยๆ เว็บไซต์สามารถจัดเก็บทรัพยากรและข้อมูลทั้งหมดที่จำเป็นในการเรียกใช้ได้อย่างมีประสิทธิภาพ เมื่อใช้ StorageManager API คุณจะระบุจํานวนเงินที่พร้อมใช้งานและจํานวนเงินที่คุณใช้ไปได้ และด้วยพื้นที่เก็บข้อมูลถาวร คุณจะป้องกันไม่ให้ผู้ใช้ถูกปลดออกได้ เว้นแต่ผู้ใช้จะนำพื้นที่เก็บข้อมูลออก
แหล่งข้อมูลเพิ่มเติม
ขอขอบคุณ
ขอขอบคุณเป็นพิเศษสำหรับ Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink และ Victor Costan ที่อ่านบทความนี้ ขอขอบคุณ Eiji Kitamura, Addy Osmani และ Marc Cohen ที่เขียนบทความต้นฉบับที่อ้างอิงในเรื่องนี้ เอจิได้เขียนเครื่องมือที่มีประโยชน์ชื่อว่าผู้ละเมิดพื้นที่เก็บข้อมูลของเบราว์เซอร์และมีประโยชน์ในการตรวจสอบลักษณะการทำงานปัจจุบัน ซึ่งจะช่วยให้คุณเก็บข้อมูลได้มากที่สุดและเห็นขีดจำกัดของพื้นที่เก็บข้อมูลในเบราว์เซอร์ ขอขอบคุณ Francois Beaufort ที่สำรวจ Safari เพื่อหาขีดจำกัดพื้นที่เก็บข้อมูล
รูปภาพหลักเป็นผลงานของ Guillaime Bolduc ใน Unsplash