IndexedDB Playground

Data

Query

Schema

Import/Export

Documentation

📋

No Data to Display

Select a database and object store to view records

Query Builder

Query Type

Key Value

Select Index

Index Value

Limit Results

📊

No Schema to Display

Select a database to view its schema

Export Data

Export Scope

Format

Import Data

JSON Data

Clear existing data before import

What is IndexedDB?

IndexedDB is a low-level API for storing large amounts of structured data in the browser. It's a transactional database system using key-value pairs with support for indexes.

Key Concepts

Database - Container for object stores. Has a name and version number.
Object Store - Like a table. Holds records as key-value pairs.
Key - Unique identifier for records. Can be in-line (keyPath) or out-of-line.
Index - Enables searching by properties other than the primary key.
Transaction - All operations happen within transactions (readonly/readwrite/versionchange).
Cursor - Mechanism for iterating over records.

Quick Reference

Opening a Database

const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};

Adding Data

const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.add({ id: 1, name: 'Alice' });

Reading Data

const tx = db.transaction('users', 'readonly');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = () => console.log(request.result);

Using Cursors

store.openCursor().onsuccess = (e) => {
  const cursor = e.target.result;
  if (cursor) {
    console.log(cursor.key, cursor.value);
    cursor.continue();
  }
};

Key Ranges

// Records with keys from 1 to 10
IDBKeyRange.bound(1, 10);
// Records with keys > 5
IDBKeyRange.lowerBound(5, true);
// Records with keys <= 100
IDBKeyRange.upperBound(100);

Data Types

IndexedDB can store most JavaScript types including:

String, Number, Boolean, null
Array, Object (plain objects)
Date, RegExp
Blob, File, ArrayBuffer
Note: Functions and DOM nodes cannot be stored

Browser Support

IndexedDB is supported in all modern browsers. Storage limits vary but typically allow several GB per origin.