Storage Manager

ก่อนจะพึ่งพา cache หรือ IndexedDB สำหรับการทำงานออฟไลน์ คุณต้องรู้ว่าเหลือพื้นที่เท่าไรและข้อมูลจะถูก evict ได้ง่ายแค่ไหน Storage Manager API ตอบคำถามทั้งสองข้อนี้

navigator.storage

Object navigator.storage เป็นจุดเข้าถึง Storage Manager API ให้คุณมองเห็นได้ว่า origin ของคุณใช้พื้นที่ดิสก์ไปเท่าไร ได้รับ quota เท่าไรจาก browser และข้อมูลของคุณได้รับการป้องกันจากการ eviction หรือไม่

method ทั้งสามคืนค่า Promise และใช้ร่วมกับ await

`navigator.storage.estimate()`

คืนค่า object ที่มีสองฟิลด์:

usage — จำนวน byte ที่ origin ใช้อยู่ขณะนี้ ครอบคลุมกลไกการจัดเก็บแบบ best-effort (Cache API, IndexedDB, OPFS ฯลฯ) — ไม่รวม localStorage/sessionStorage หรือ cookie ซึ่งมี quota แยกต่างหากที่เล็กกว่ามาก
quota — จำนวน byte โดยประมาณที่ browser ยินดีให้ origin นี้ใช้

const { usage, quota } = await navigator.storage.estimate();

const usageMB = (usage / 1024 ** 2).toFixed(2);
const quotaMB = (quota / 1024 ** 2).toFixed(2);

console.log(\`Used: \${usageMB} MB of \${quotaMB} MB available\`);

quota เป็นค่าที่เปลี่ยนแปลงได้ — ขึ้นอยู่กับพื้นที่ว่างบนอุปกรณ์ ณ ขณะนั้น บนมือถือที่มีพื้นที่จำกัด quota อาจเล็กกว่าบนเครื่อง desktop มาก

`navigator.storage.persist()`

ร้องขอให้ browser ให้ persistent storage แก่ origin ปัจจุบัน คืนค่า Promise ที่ resolve เป็น true ถ้าคำขอได้รับอนุมัติ หรือ false ถ้า browser ปฏิเสธ

const granted = await navigator.storage.persist();
console.log('Persistent storage granted:', granted);

การที่ browser จะอนุมัติ persistence หรือไม่นั้นขึ้นอยู่กับ heuristic ของ browser เช่น ผู้ใช้ได้เพิ่มเว็บไซต์ไปยังหน้าจอหลักแล้วหรือไม่ ผู้ใช้เข้าเว็บบ่อยแค่ไหน หรือผู้ใช้อนุมัติ permission prompt อย่างชัดเจนหรือไม่ คุณไม่สามารถบังคับให้คืนค่า true ได้

`navigator.storage.persisted()`

ตรวจสอบว่า origin ปัจจุบันมี persistent storage อยู่แล้วหรือไม่ คืนค่า Promise ที่ resolve เป็น true ถ้า storage เป็น persistent อยู่แล้ว หรือ false ถ้ายังเป็น best-effort

const isPersistent = await navigator.storage.persisted();

if (isPersistent) {
  console.log('Data is safe from automatic eviction');
} else {
  console.log('Data may be evicted under storage pressure');
}

ใช้ persisted() ตอนแอปเริ่มทำงานเพื่อตัดสินใจว่าจะแสดง prompt “โปรดอนุญาต persistent storage” ให้ผู้ใช้หรือไม่

ลองเลย: ตรวจสอบ usage, quota, และ persistence

Browser Storage

(async () => {
  // Check current usage and quota
  const { usage, quota } = await navigator.storage.estimate();

  const usageMB = (usage / 1024 ** 2).toFixed(2);
  const quotaMB = (quota / 1024 ** 2).toFixed(2);

  console.log('Storage usage:', usageMB, 'MB');
  console.log('Storage quota:', quotaMB, 'MB');
  console.log('Usage as % of quota:', ((usage / quota) * 100).toFixed(4) + '%');

  // Check whether storage is currently persistent
  const isPersistent = await navigator.storage.persisted();
  console.log('Is persistent:', isPersistent);

  if (!isPersistent) {
    console.log('Tip: call navigator.storage.persist() to request eviction protection');
  }
})();

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
เรียก `estimate()` ก่อนเริ่ม cache ข้อมูลจำนวนมาก	รู้ล่วงหน้าว่าเหลือ quota เท่าไร ป้องกันการเขียนล้มเหลวกลางทาง	เป็นค่าประมาณเท่านั้น browser อาจปัดเลขเพื่อกัน fingerprinting ทำให้ไม่แม่นยำ 100%
เรียก `persist()` เพื่อป้องกันการ evict	ข้อมูลไม่ถูกลบอัตโนมัติเมื่อดิสก์ตึง เหมาะกับแอปออฟไลน์	ต้องพึ่ง heuristic ของ browser ในการอนุมัติ และเพิ่ม friction เล็กน้อยให้ flow เริ่มต้นแอป
ใช้ best-effort storage โดยไม่ขอ persist	zero-friction ไม่ต้องรอเงื่อนไขใด ๆ	เสี่ยงถูก evict โดยไม่มีการแจ้งเตือนล่วงหน้า

ข้อผิดพลาดที่พบบ่อย

ไม่เช็ค navigator.storage.persisted() ก่อนสรุปว่าข้อมูลปลอดภัยแล้ว — แค่เรียก persist() ครั้งเดียวไม่ได้แปลว่าสำเร็จเสมอไป ต้อง verify ผลลัพธ์จริงก่อนไว้ใจ
คิดว่า usage จาก estimate() รวม localStorage ด้วย — จริง ๆ แล้วครอบคลุมแค่ storage แบบ best-effort (Cache API, IndexedDB, OPFS) เท่านั้น localStorage/sessionStorage และ cookie มี quota แยกต่างหากที่เล็กกว่ามากและไม่ปรากฏในตัวเลขนี้เลย
เก็บ opaque response จำนวนมากแล้วแปลกใจว่า quota หมดเร็วผิดปกติ — opaque response นับขนาดเต็มจริง (มักหลาย MB ต่อรายการ) เข้า usage แม้จะอ่าน body ไม่ได้