Resolving QuotaExceededError: Browser Storage Limits Across Chrome, Firefox, and Safari

Offline-first applications frequently fail during bulk state synchronization or asset caching. Developers encounter QuotaExceededError (DOMException 22) or experience silent data truncation when writing to IndexedDB or the Cache API. The failure manifests inconsistently because the Storage Quotas & Eviction Policies that govern allocation vary by engine implementation, device capacity, and user interaction state. For the foundational model behind these limits, review Browser Storage Fundamentals & Quotas.

Problem Statement: Cross-Browser QuotaExceededError and Silent Data Loss

Offline-first applications frequently fail during bulk state synchronization or asset caching. Developers encounter QuotaExceededError (DOMException 22) or experience silent data truncation when writing to IndexedDB or the Cache API. The failure manifests inconsistently because storage limits vary by engine implementation, device capacity, and user interaction state.

Common Symptoms:

• DOMException: QuotaExceededError thrown during put(), add(), or Cache.put() operations
• Silent failure in Safari when exceeding per-origin caps without the persistent storage flag
• Inconsistent navigator.storage.estimate() values across Chrome, Firefox, and Safari

Root Cause: Divergent Quota Management & Eviction Strategies

Each browser enforces distinct storage boundaries and lifecycle rules. The Storage Standard defines a single temporary “best-effort” bucket per origin and a persisted flag that exempts it from eviction, but it deliberately leaves the size of that bucket and the eviction heuristics to each implementation. That latitude is exactly why a payload that writes cleanly on a Chrome desktop can throw on an iPhone.

Engine-Specific Breakdown:

• Chrome/Chromium: Allocates up to ~60% of available free disk space as the total temporary storage pool shared across all origins. Per-origin limits are a fraction of that pool. Aggressively evicts non-persistent data under system disk pressure.
• Firefox: The temporary storage group (IndexedDB + CacheStorage) is capped at 20% of total disk space, with a per-origin limit of the lesser of 10 GB or 10% of the group quota. Applies LRU eviction; call navigator.storage.persist() to opt out.
• Safari: Grants roughly 1 GB per origin initially, then prompts the user to allow more (Safari 17+ no longer enforces a single hard cap); installed PWAs may receive more. Clears script-writable storage for unvisited origins after 7 days of inactivity. Requires a direct user gesture to honour navigator.storage.persist().

Understanding these mechanics is critical for implementing robust quota handling. The Safari inactivity wipe in particular deserves its own mitigation strategy, covered in The iOS Safari 7-Day Storage Eviction Workaround. Note that this 7-day clearing is enforced by Intelligent Tracking Prevention and operates independently of disk quota — a topic explored under Storage Partitioning & Privacy Controls.

Step-by-Step Fix: Quota-Aware Write Implementation

Implement a defensive write pipeline that checks available quota, requests persistence, and handles overflow gracefully before committing data to IndexedDB or the Cache API.

1. Query current usage and available quota. Call navigator.storage.estimate() to retrieve usage and quota. Calculate remaining capacity before initiating bulk writes to prevent mid-transaction failures.
2. Request persistent storage. Invoke navigator.storage.persist() early in the app lifecycle. On Safari, this must be triggered directly from a user gesture (click/tap). Without persistence, data remains temporary and subject to automatic eviction.
3. Wrap write operations in a quota-aware async handler. Use try/catch blocks around database transactions. Implement chunked writes and fallback to in-memory buffers or compressed formats when approaching 80% of available capacity.
4. Handle QuotaExceededError explicitly. Catch DOMException with name === 'QuotaExceededError' or legacy code === 22. Trigger immediate cache/DB cleanup routines, log telemetry, and notify the user to free disk space or reduce sync frequency.

/**
 * Production-safe quota-aware write handler for IndexedDB.
 * Uses the native IDBDatabase API; no wrapper library required.
 */
async function safePersistData(db, storeName, payload) {
  const { usage = 0, quota = 0 } = await navigator.storage.estimate();
  const remaining = quota - usage;
  const payloadSize = new Blob([JSON.stringify(payload)]).size;

  // Proactive cleanup at 80% capacity threshold
  if (remaining > 0 && payloadSize > remaining * 0.8) {
    console.warn('[Storage] Approaching quota limit. Initiating background cleanup.');
    await clearOldEntries(db, storeName);
  }

  // Request persistent storage if not already granted
  if (navigator.storage.persist && !(await navigator.storage.persisted())) {
    const granted = await navigator.storage.persist();
    if (!granted) {
      console.warn('[Storage] Persistent storage denied. Data subject to browser eviction.');
    }
  }

  return new Promise((resolve, reject) => {
    const tx = db.transaction(storeName, 'readwrite');
    const store = tx.objectStore(storeName);

    store.put(payload, 'current_state');

    tx.oncomplete = async () => {
      const updated = await navigator.storage.estimate();
      resolve({ success: true, usage: updated.usage });
    };

    tx.onerror = () => {
      const err = tx.error;
      if (err && (err.name === 'QuotaExceededError' || err.code === 22)) {
        console.error('[Storage] QuotaExceededError triggered. Executing emergency eviction.');
        clearOldEntries(db, storeName).catch(console.error);
        reject(
          new Error('Storage quota exceeded. Fallback cleanup executed. Retry with reduced payload.'),
        );
      } else {
        reject(err);
      }
    };
  });
}

async function clearOldEntries(db, storeName) {
  return new Promise((resolve, reject) => {
    const tx = db.transaction(storeName, 'readwrite');
    tx.objectStore(storeName).clear();
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

Validation: Cross-Browser Quota Testing & Verification

Verify implementation stability by simulating low-disk conditions and monitoring quota reporting accuracy across target browsers.

• Confirm navigator.storage.estimate() returns accurate usage/quota deltas in Chrome DevTools > Application > Storage.
• Validate Firefox quota behavior by reducing available disk space via a VM or container limit.
• Test Safari persistence flow by triggering navigator.storage.persist() exclusively from a user-initiated click or touchstart handler.
• Simulate QuotaExceededError by artificially inflating payload size; verify fallback cleanup executes without unhandled promise rejections.
• Monitor browser eviction logs to ensure non-persistent data is cleared predictably under system memory pressure.

Edge Cases & Fallback Approaches

When persist() is denied — common on browsers with low engagement scores — fall back to a server-authoritative model: treat the local store as a disposable cache and re-sync from the backend whenever an integrity probe finds it missing. For payloads that are simply too large for a constrained origin, chunk them across multiple keys and compress before writing, or move bulk binary data to the Origin Private File System (OPFS), which is sized from the same pool but avoids the per-record overhead of structured cloning. On Safari specifically, do not rely on a successful estimate() reading alone; the reported quota can shrink after the user dismisses the storage prompt, so always keep the catch path live.

Frequently Asked Questions

Related

• Storage Quotas & Eviction Policies — the parent guide on allocation, persistence tiers, and eviction.
• Debugging Storage Eviction in Progressive Web Apps — diagnosing silent data loss after the quota fix.
• The iOS Safari 7-Day Storage Eviction Workaround — surviving WebKit’s inactivity wipe.
• Storage Partitioning & Privacy Controls — why privacy engines clear storage outside the quota model.
• Browser Storage Fundamentals & Quotas — the foundational storage primitives.