Offline files and durability
Measure quota and request persistence
Estimate origin usage, handle quota failures, and request persistent storage only when the product can justify it.
8 minute lesson
Browser storage is best-effort by default. “Persistent” never means immortal.
Use navigator.storage.estimate() to display approximate usage and quota. The browser may pad or round these values for privacy. Ask for persistence when data is important, user-created, and not safely stored elsewhere.
const { usage = 0, quota = 0 } = await navigator.storage.estimate()
const alreadyPersistent = await navigator.storage.persisted()
const persistent = alreadyPersistent || await navigator.storage.persist()
console.log({ usage, quota, persistent })navigator.storage.persist() returns whether persistence was granted. Browsers use their own permission and engagement rules. Keep the app useful when the answer is false.
Writes to IndexedDB, Cache Storage, or OPFS can fail with QuotaExceededError. Delete replaceable caches first, preserve user work, and explain the recovery choice.
Do not turn an approximate quota into a promise. Available space and browser policy can change after you display it.
Add a storage status panel with estimated usage, quota, and persistence. Simulate a quota failure and make cleanup remove cached help before any user note or attachment.
Lesson completed