---
title: "What are common reasons for 'QuotaExceededError' in IndexedDB, and how do you handle it?"  
description: "What are common reasons for 'QuotaExceededError' in IndexedDB, and how do you handle it?"  
author: "ICSM Computer"  
published: 2025-07-11  
updated: 2025-07-11  
canonical: https://www.mindstick.com/interview/34333/what-are-common-reasons-for-quotaexceedederror-in-indexeddb-and-how-do-you-handle-it  
category: "IndexedDB"  
tags: ["database", "indexeddb"]  
reading_time: 5 minutes  

---

# What are common reasons for 'QuotaExceededError' in IndexedDB, and how do you handle it?

> 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:

```javascript
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**:

```javascript
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)

```javascript
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:

```javascript
// 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:

```javascript
const count = await db.syncQueue.count();
if (count > 1000) {
  await db.syncQueue.limit(100).delete(); // keep only recent
}
```

## Answers

### Answer by ICSM Computer

> 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:

```javascript
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**:

```javascript
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)

```javascript
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:

```javascript
// 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:

```javascript
const count = await db.syncQueue.count();
if (count > 1000) {
  await db.syncQueue.limit(100).delete(); // keep only recent
}
```


---

Original Source: https://www.mindstick.com/interview/34333/what-are-common-reasons-for-quotaexceedederror-in-indexeddb-and-how-do-you-handle-it

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.