Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews What are common reasons for 'QuotaExceededError' in IndexedDB, and how do you handle it? – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 11 Jul 2025
Report Abuse

A QuotaExceededError in IndexedDB happens when the browser denies a write operation because your app has exceeded its allowed storage quota. It’s a storage limit issue and can be tricky, especially for offline-first apps. 

Here's what causes it and how to handle it:

Common Causes of QuotaExceededError

Cause Description
Too much data You're trying to store more than the browser allows
Blob or large JSON payloads Storing images, videos, or large arrays/objects
No user interaction yet Storage quota is lower if the user hasn’t interacted with your app
Private/Incognito mode Browsers severely restrict IndexedDB size in incognito (sometimes <1MB)
Shared quota limit Your app shares a quota with other apps on the domain
Quota exceeded globally The device’s total disk quota (not just your site) is full

Typical Limits (Approximate)

Browser Persistent Temporary (Default) Incognito
Chrome Up to 60% of free disk (with user permission) ~50MB–2GB 0–1MB
Firefox ~2GB or more ~50MB default 0–1MB
Safari 50MB (auto prompt at 5MB) Very strict 0MB

📌 By default, most storage is temporary and limited unless user grants permission (e.g. via Persistent Storage API)

How to Handle It Gracefully

1. Catch the Error

Wrap writes in a try/catch block:

try {
  await db.items.bulkPut(largeData);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    alert('Storage limit exceeded. Try clearing old data or use less offline space.');
    // Optional: trigger cleanup or switch to cloud-only mode
  } else {
    throw e;
  }
}

2. Estimate Available Storage

Use the StorageManager API:

if (navigator.storage && navigator.storage.estimate) {
  const { quota, usage } = await navigator.storage.estimate();
  console.log(`Used ${(usage / quota * 100).toFixed(2)}% of quota`);
}

3. Request Persistent Storage (Chrome, Edge)

if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  if (isPersisted) {
    console.log("Persistent storage granted");
  } else {
    console.warn("Persistent storage denied");
  }
}
  • May increase available quota significantly
  • Requires HTTPS and user interaction

4. Store Smaller Data

  • Compress large payloads (e.g., JSON, text) before saving
  • Store images/files as references (e.g., upload to server) instead of full blobs
  • Avoid saving large media directly in IndexedDB unless absolutely needed

5. Clean Up Unused Data

Implement data expiration or LRU (Least Recently Used) cache patterns:

// Example: delete items older than 30 days
const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
await db.items.where('updatedAt').below(cutoff).delete();

6. Limit Sync Queue Size

If using a sync queue (e.g. offline-first apps), cap it:

const count = await db.syncQueue.count();
if (count > 1000) {
  await db.syncQueue.limit(100).delete(); // keep only recent
}
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md