Suggest an edit

Improve this article

Refine the answer for “What is indexedDB?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

> **IndexedDB** is a low-level API for storing data in the browser,
> which lets you create **object stores**, run **queries**, build **indexes**, and use **transactions**.

Put simply:
IndexedDB is a **mini database in the browser**, running on the client.
It saves data **to disk**, so it is not cleared when the tab or browser restarts.

---

## 1. Main features of IndexedDB

| Capability | Description |
|---|---|
| **Stores objects, not strings** | You can store whole JS objects without manual serialization |
| **Works asynchronously** | Through promises or callbacks |
| **Supports indexes** | You can quickly search data by keys |
| **Uses transactions** | Operations run atomically |
| **Supports versioning** | Every database update comes with a version change |
| **Stores large amounts of data** | You can store tens of megabytes, even binary files (Blob, ArrayBuffer) |

---

## 2. Example of creating and using IndexedDB

```javascript
// 1. Open (or create) the database
const request = indexedDB.open('myDatabase', 1);

// 2. Event fired the first time the database is created
request.onupgradeneeded = (event) => {
  const db = event.target.result;

// Create an "object store" (like a table)
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

// 3. On a successful open
request.onsuccess = (event) => {
  const db = event.target.result;

// Add a record
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Tim', age: 25 });

tx.oncomplete = () => console.log('Data saved!');
};
```

Here:

- `open('myDatabase', 1)` creates or opens a database at version `1`;
- `createObjectStore('users')` creates a store for objects (like a table);
- `keyPath: 'id'` marks the `id` field as the unique key;
- `transaction('users', 'readwrite')` creates a transaction for writing.

---

## 3. Reading data

```javascript
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');

const userRequest = store.get(1);

userRequest.onsuccess = () => {
    console.log('User:', userRequest.result);
  };
};
```

---

## 4. Working with indexes

```javascript
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const index = store.index('name');

const req = index.get('Tim');
  req.onsuccess = () => console.log('Found:', req.result);
};
```

Indexes let you search not only by `keyPath`, but by any field of the object.

---

## 5. Deleting and updating

```javascript
// Update
store.put({ id: 1, name: 'Tim', age: 26 });

// Delete
store.delete(1);
```

---

## 6. Working with Promises (through a wrapper)

The native IndexedDB API is bulky.
For convenience, developers often use the **idb** library (an official wrapper from Google):

```javascript
import { openDB } from 'idb';

const db = await openDB('myDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('users', { keyPath: 'id' });
  },
});

await db.put('users', { id: 1, name: 'Tim' });
const user = await db.get('users', 1);
console.log(user);
```

The `idb` library makes IndexedDB pleasant to use, through `async/await` and promises.

---

## 7. IndexedDB vs localStorage

| Property | **IndexedDB** | **localStorage** |
|---|---|---|
| Capacity | Up to hundreds of MB | ~5 MB |
| Data type | Objects, files, Blob | Strings only |
| Asynchronous | Yes | No |
| Speed | Faster at large volumes | Slower |
| Search by key | Has indexes | Direct access only |
| Usage | Cache, offline apps, PWA | Simple settings and tokens |

---

## Summary

| Parameter | Description |
|---|---|
| API | Asynchronous, event-driven |
| Stores | Objects, files, binary data |
| Main structure | Object Store (like a table) |
| Uses | Transactions, indexes |
| Where it's used | PWAs, offline storage, data caches, serverless apps |

---

> **Remember it simply:**
> IndexedDB is a **"database right inside the browser"**,
> where you can store **a lot of data, like in SQL**,
> but in the form of **JavaScript objects**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts667 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.