Storage Quotas & Persistence Policies0%
Custom Events & Event Dispatching

Storage Quotas & Persistence Policies

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Storage Quotas & Persistence Policies in Modern JavaScript

When web applications store hundreds of megabytes of media, offline databases, and application assets via IndexedDB and the Cache API, browsers enforce storage management policies. Understanding Storage Quotas, eviction algorithms, and requesting Persistent Storage ensures your app's offline data is never unexpectedly purged by the browser.

1. Storage Quotas: Best-Effort vs. Persistent

By default, all web storage (IndexedDB, Cache API, LocalStorage) operates in Best-Effort mode:

  • Best-Effort Storage: If device disk space runs critically low, the browser's storage manager automatically evicts (deletes) entire origin storage trees without asking the user, using an LRU (Least Recently Used) policy!
  • Persistent Storage: Data is guaranteed not to be deleted by automatic browser clearing. It can only be cleared if the user explicitly clears browser data.
Output
Storage Mode:
├── Best-Effort (Default) ──► Low Disk Space? ──► Silently Deleted by Browser!
└── Persistent Storage ──► Low Disk Space? ──► PRESERVED! User must manually clear.

2. Inspecting Storage Quota with navigator.storage.estimate()

To monitor available space and consumption in bytes:

JavaScript
async function checkStorageQuota() {
if (navigator.storage && navigator.storage.estimate) {
const { quota, usage } = await navigator.storage.estimate();
 
const usageMB = (usage / (1024 * 1024)).toFixed(2);
const quotaMB = (quota / (1024 * 1024)).toFixed(2);
const percentUsed = ((usage / quota) * 100).toFixed(1);
 
console.log(`Storage: ${usageMB} MB used of ${quotaMB} MB available (${percentUsed}%)`);
 
if (percentUsed > 80) {
console.warn('Storage quota above 80%! Prompting user to clear old media.');
}
}
}

3. Requesting Persistent Storage: navigator.storage.persist()

To transition your origin from Best-Effort to Persistent storage, request persistence:

JavaScript
async function requestPersistentStorage() {
if (navigator.storage && navigator.storage.persist) {
// Check if already persistent
const isAlreadyPersistent = await navigator.storage.persisted();
console.log('Already persistent:', isAlreadyPersistent);
 
if (!isAlreadyPersistent) {
// Request permission from browser/user
const isGranted = await navigator.storage.persist();
console.log(`Persistent storage granted: ${isGranted}`);
if (isGranted) {
console.log('Data is protected from automatic browser eviction.');
} else {
console.log('Operating in best-effort storage mode.');
}
}
}
}

Browser Granting Heuristics:

Browsers (Chrome, Firefox, Safari) may grant persistent storage automatically without a prompt if:

  • The site is installed as a PWA (added to home screen).
  • The user has bookmarked the site.
  • The user has high engagement (frequent visits).
  • Push notification permissions have been granted.

4. Handling Storage Overflows: QuotaExceededError

When attempting to store data beyond the allowed quota, operations throw a QuotaExceededError (DOMException code 22). Always catch this error defensively:

JavaScript
try {
await cache.put(request, largeResponse);
} catch (error) {
if (error.name === 'QuotaExceededError') {
console.error('Disk quota exceeded! Purging non-essential caches.');
purgeOldestCacheBucket();
}
}
Interactive Quiz

Practice Quiz

Question 1
What happens to data stored in "Best-Effort" mode when the client device runs low on disk space?
Question 2
Which method requests the browser to exempt an application from automatic storage eviction?
Question 3
What function calculates current storage usage and maximum quota allocation in bytes?
Question 4
What error is thrown when an IndexedDB or Cache API write exceeds available storage capacity?
Question 5
How can a developer verify whether the current site has already been granted persistent storage?
Next Lesson

Custom Events & Event Dispatching

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Cache API & Service Worker StorageCustom Events & Event Dispatching

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext