การจัดเก็บข้อมูลในเบราว์เซอร์มีอยู่ด้วยกันหลายวิธี ว่าแต่กลยุทธ์ไหนเหมาะกับความต้องการของคุณที่สุด
การเชื่อมต่ออินเทอร์เน็ตอาจขัดข้องหรือไม่มีอยู่จริงทุกที่ทุกเวลา จึงเป็นเหตุผล การสนับสนุนแบบออฟไลน์และประสิทธิภาพที่เชื่อถือได้ คือคุณลักษณะทั่วไปใน Progressive Web App แม้จะอยู่ในระบบไร้สายที่สมบูรณ์แบบ การใช้แคชและเทคนิคการจัดเก็บข้อมูลอื่นๆ อย่างเหมาะสม ปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก การแคชทำได้หลายวิธี ทรัพยากรของแอปพลิเคชันแบบคงที่ (HTML, JavaScript, CSS, รูปภาพ ฯลฯ) และ (ข้อมูลผู้ใช้ บทความข่าว ฯลฯ) แต่ข้อใดคือโซลูชันที่ดีที่สุด อย่างไร คุณจะเก็บไว้ได้เยอะแค่ไหน คุณจะป้องกันไม่ให้ถูกขับออกได้อย่างไร
ฉันควรใช้อะไร
คำแนะนำทั่วไปในการจัดเก็บทรัพยากรมีดังนี้
- สำหรับทรัพยากรเครือข่ายที่จำเป็นในการโหลดแอปและเนื้อหาตามไฟล์ ใช้ Cache Storage API (ส่วนหนึ่งของ โปรแกรมทำงานของบริการ)
- สำหรับข้อมูลอื่น ให้ใช้ IndexedDB (ที่มีค่า promises Wrapper)
IndexedDB และ Cache Storage API ได้รับการรองรับในเบราว์เซอร์รุ่นใหม่ทั้งหมด
โดยทั้งสองเป็นแบบไม่พร้อมกัน และจะไม่บล็อกเทรดหลัก คือ
สามารถเข้าถึงได้จากออบเจ็กต์ window, Web Worker และ Service Worker ซึ่งทำให้
ก็ใช้ได้ทุกที่ในโค้ด
แล้วกลไกพื้นที่เก็บข้อมูลอื่นๆ ล่ะ
มีกลไกการจัดเก็บข้อมูลอื่นๆ มากมายบนเบราว์เซอร์ แต่ มีการใช้งานที่จำกัดและอาจทำให้เกิดปัญหาด้านประสิทธิภาพที่สำคัญ
SessionStorage เป็นแท็บที่เฉพาะเจาะจงและกำหนดขอบเขต ตลอดอายุการใช้งานแท็บ วิธีนี้อาจเป็นประโยชน์ในการจัดเก็บเซสชันจำนวนน้อย ข้อมูลที่เจาะจง ตัวอย่างเช่น คีย์ IndexedDB ควรใช้กับ โปรดระวังเนื่องจากเป็นแบบซิงโครนัสและจะบล็อกเทรดหลัก ใช่เลย ขนาดไม่เกิน 5 MB และมีได้เฉพาะสตริงเท่านั้น เนื่องจากนี่เป็นแท็บ ไม่สามารถเข้าถึงได้โดย Web Worker หรือ 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 โดยไม่มีแผนที่จะวางแผนการอัปเดตเพิ่มเติม
ควรไม่ใช้แคชของแอปพลิเคชัน และการใช้งานที่มีอยู่ควร ย้ายข้อมูลไปยัง Service Worker และ Cache API คือ เลิกใช้งานแล้ว และระบบจะนำการสนับสนุนออกจากเบราว์เซอร์ใน ในอนาคต
ฉันสามารถจัดเก็บได้มากแค่ไหน
กล่าวโดยสรุปคือมาก อย่างน้อย 2-3 เมกะไบต์ และ หลายร้อยกิกะไบต์หรือมากกว่า การใช้งานเบราว์เซอร์จะแตกต่างกันไป แต่จำนวน โดยปกติ พื้นที่เก็บข้อมูลที่ใช้ได้จะขึ้นอยู่กับปริมาณพื้นที่เก็บข้อมูลที่มีใน อุปกรณ์
- Chrome ช่วยให้เบราว์เซอร์ใช้พื้นที่ในดิสก์ได้ถึง 80% จากทั้งหมด ต้นทางสามารถ
ใช้พื้นที่ในดิสก์ได้ถึง 60% คุณสามารถใช้ StorageManager
API เพื่อกำหนดโควต้าสูงสุดที่มี ที่ใช้ Chromium อื่นๆ
เบราว์เซอร์อาจแตกต่างกัน
- ในโหมดไม่ระบุตัวตน Chrome จะลดปริมาณพื้นที่เก็บข้อมูลที่ต้นทางใช้ได้ เป็นประมาณ 5% จากพื้นที่ในดิสก์ทั้งหมด
- หากผู้ใช้เปิดใช้ "ล้างคุกกี้และข้อมูลเว็บไซต์เมื่อคุณปิดทั้งหมด หน้าต่าง" ใน Chrome โควต้าพื้นที่เก็บข้อมูลจะลดลงอย่างมากเหลือ ขนาดสูงสุดประมาณ 300 MB
- ดู PR #3896 สำหรับ รายละเอียดเกี่ยวกับการติดตั้งใช้งาน Chrome
- Internet Explorer 10 ขึ้นไปสามารถเก็บข้อมูลได้สูงสุด 250 MB และจะแสดงข้อความเตือน ผู้ใช้เมื่อมีการใช้มากกว่า 10 MB
- Firefox อนุญาตให้เบราว์เซอร์ใช้พื้นที่ว่างในดิสก์ได้ถึง 50% CANNOT TRANSLATE
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 เบราว์เซอร์จะแสดงข้อความแจ้งผู้ใช้ เพื่อให้เก็บข้อมูลได้สูงสุด 100MB จากนั้นให้ถามอีกครั้งทุกๆ 50MB
ในปัจจุบัน เบราว์เซอร์รุ่นใหม่ส่วนมากจะไม่แจ้งผู้ใช้ แต่จะอนุญาตไซต์ โดยใช้โควต้าที่จัดสรรไว้ ข้อยกเว้นนี้คือ 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 ยังไม่ได้implementedในเบราว์เซอร์ทั้งหมด ดังนั้นคุณ ฟีเจอร์ต้องตรวจจับได้ก่อนที่จะใช้งาน แม้ว่าจะมีให้บริการก็ตาม คุณต้อง ยังคงตรวจพบข้อผิดพลาดที่เกินโควต้า (ดูด้านล่าง) ในบางกรณี มีความเป็นไปได้ที่ จากโควต้าที่มีอยู่เพื่อให้เกินปริมาณพื้นที่เก็บข้อมูลที่ใช้ได้จริง
ตรวจสอบ
ในระหว่างการพัฒนา คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บในเบราว์เซอร์เพื่อตรวจสอบ พื้นที่เก็บข้อมูลประเภทต่างๆ และสามารถล้างข้อมูลที่จัดเก็บไว้ทั้งหมดได้อย่างง่ายดาย
มีการเพิ่มฟีเจอร์ใหม่ใน 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 ส่วน ได้แก่ "คุ้มค่าที่สุด" และ "Persistent" ความพยายามอย่างเต็มที่หมายความว่าเบราว์เซอร์สามารถล้างพื้นที่เก็บข้อมูลได้หากไม่มี รบกวนผู้ใช้ แต่มีความยั่งยืนสำหรับข้อมูลระยะยาวหรือข้อมูลที่สำคัญ ระบบจะไม่ล้างพื้นที่เก็บข้อมูลถาวรโดยอัตโนมัติเมื่อพื้นที่เก็บข้อมูลเหลือน้อย ผู้ใช้ ต้องล้างพื้นที่เก็บข้อมูลนี้ด้วยตนเอง (ผ่านการตั้งค่าเบราว์เซอร์)
โดยค่าเริ่มต้น ข้อมูลของเว็บไซต์ (รวมถึง 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 ระดับต่ำที่ต้องมีการตั้งค่าจำนวนมากก่อนการใช้งาน ซึ่งอาจยุ่งยากมากในการจัดเก็บข้อมูลง่ายๆ ต่างจากความทันสมัยที่สุด และอิงตามเหตุการณ์เป็นหลัก คำมั่นสัญญาว่าชอบ idb สำหรับ IndexedDB ซ่อนคุณลักษณะที่มีประสิทธิภาพบางอย่าง ที่สำคัญ ให้ซ่อนเครื่องจักรที่ซับซ้อน (เช่น ธุรกรรม การกำหนดเวอร์ชันสคีมา) ที่มาพร้อมกับไลบรารี IndexedDB
บทสรุป
หมดยุคจากการจัดเก็บข้อมูลที่จำกัด และการแจ้งให้ผู้ใช้จัดเก็บเพิ่ม ข้อมูลมากขึ้น เว็บไซต์สามารถจัดเก็บทรัพยากรและข้อมูลทั้งหมดที่ จำเป็นต้องเรียกใช้ เมื่อใช้ StorageManager API คุณจะทำสิ่งต่อไปนี้ได้ ว่าคุณจะใช้ไปได้มากเพียงใดและมีการใช้ไปเท่าใด และมาพร้อมกับ พื้นที่เก็บข้อมูลถาวร เว้นแต่ว่าผู้ใช้จะนำข้อมูลออก จะปกป้องสิทธิจากการถูกขับไล่ได้
แหล่งข้อมูลเพิ่มเติม
ขอขอบคุณ
ขอขอบคุณเป็นพิเศษสำหรับ Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy Darwin Huang, Josh Bell, Marijn Kruizenbrink และ Victor Costan จะมาตรวจสอบ บทความนี้ ขอขอบคุณ Eiji Kitamura, Addy Osmani และ Marc Cohen ผู้เขียนบท บทความต้นฉบับที่ อ้างอิงแหล่งที่มานี้ Eiji เขียนเครื่องมือที่มีประโยชน์ ชื่อผู้ละเมิดพื้นที่เก็บข้อมูลของเบราว์เซอร์ซึ่งมีประโยชน์ในการตรวจสอบ การทำงานปัจจุบัน ทำให้คุณสามารถจัดเก็บข้อมูลได้มากที่สุดและมองเห็น ขีดจำกัดของพื้นที่เก็บข้อมูลบนเบราว์เซอร์ของคุณ ขอขอบคุณ Francois Beaufort ที่ขุดคุ้ยหา เข้าสู่ Safari เพื่อดูขีดจำกัดพื้นที่เก็บข้อมูล
รูปภาพหลักเขียนโดย Guillaime Bolduc หน้าจอแนะนํา