IndexedDB Overview and Practical Guide for Frontend CRUD Operations

IndexedDB Overview

IndexedDB is a NoSQL‑style client‑side database supported by modern browsers, offering large storage capacity (up to 50% of available disk space) and the ability to store complex JavaScript objects without manual serialization.

Application

The article demonstrates how to build a full CRUD application in about 15 minutes, showing the "family" of IndexedDB objects and their relationships.

Key Concepts

IDBFactory : Global entry point for opening or deleting databases; provides open , deleteDatabase , and cmp methods.

IDBDatabase : Represents an opened database; offers createObjectStore , transaction , close , and version information.

IDBTransaction : Handles read/write operations in a transactional context; created via db.transaction with readonly or readwrite mode.

IDBObjectStore : Analogous to a collection/table; provides add , put , get , delete , clear , and index management.

IDBIndex : Enables fast lookup on specified fields; created with createIndex and supports unique or multi‑entry options.

IDBKeyRange : Describes query ranges; static methods include bound , only , lowerBound , and upperBound .

IDBCursor / IDBCursorWithValue : Iterate over records efficiently; the latter exposes a value property for direct object access.

Creating a Database Connection

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || { READ_WRITE: "readwrite" };
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
const openRequest = indexedDB.open('TestDB', 1);
openRequest.onerror = event => { console.log('error', event); };
let db;
openRequest.onsuccess = event => { console.log('success'); db = event.target.result; };

Handling Database Upgrade

openRequest.onupgradeneeded = event => {
  console.log('upgradeneeded');
  const db = event.target.result;
  const store = db.createObjectStore('contacts', { keyPath: 'id', autoIncrement: true });
  store.createIndex('name', 'name');
  store.createIndex('email', 'email', { unique: true });
};

Getting a Transaction Object

const tx = db.transaction(['notes', 'users', 'customers'], 'readwrite');

Obtaining an Object Store

const store = tx.objectStore('contacts');

CRUD Operations

Insert Data

store.add({ name: 'John', lastName: 'Doe', age: 31, email: '[email protected]', hobbies: ['reading', 'drawing', 'painting'] });
store.add({ name: 'Madge', lastName: 'Frazier', age: 22, email: '[email protected]', hobbies: ['swimming', 'jogging', 'yoga'] });

Delete Data

var objectStore = tx.objectStore('contacts');
objectStore.delete(1);
var beDelete = store.openCursor(IDBKeyRange.only(1));
beDelete.onsuccess = e => {
  const cursor = event.target.result;
  if (cursor) cursor.delete();
};

Update Data (with keyPath)

const cursorRequest = store.openCursor(1);
cursorRequest.onsuccess = evt => {
  const cursor = evt.target.result;
  if (cursor) {
    let contact = cursor.value;
    contact.name = "J";
    cursor.update(contact);
  }
};

Update Data (without keyPath)

store.put({ name: 'Madge', lastName: 'Frazier', age: 43, email: '[email protected]', hobbies: ['swimming', 'jogging', 'yoga'] }, 3);

Query Methods

Range queries using IDBKeyRange :

store.getAll(IDBKeyRange.bound(1, 3)).onsuccess = evt => { console.log(evt.target.result); };

Index‑based range query:

const nameIndex = store.index('name');
nameIndex.getAll(IDBKeyRange.bound('J', 'Mb')).onsuccess = evt => { console.log(evt.target.result); };

Cursor iteration on object store:

store.openCursor(IDBKeyRange.bound(1, 3)).onsuccess = evt => {
  const cursor = evt.target.result;
  if (cursor) { console.log(cursor.value); cursor.continue(); }
};

Cursor iteration on index:

const nameIndex = store.index('name');
nameIndex.openCursor(IDBKeyRange.bound('B', 'Mb')).onsuccess = evt => {
  const cursor = evt.target.result;
  if (cursor) { console.log(cursor.value); cursor.continue(); }
};

Detailed Object Documentation

IDBFactory

Provides open(name, version) to create or upgrade a database and deleteDatabase(name) to remove it. Events onsuccess , onerror , onupgradeneeded , and blocked allow handling of asynchronous outcomes.

IDBDatabase

Returned by open ; exposes read‑only name , version , and objectStoreNames . Methods include createObjectStore , deleteObjectStore , transaction , and close . Supports readonly and readwrite transaction modes with optional durability settings.

IDBTransaction

Created via db.transaction ; groups one or more object stores, defines mode and optional durability . Provides objectStore(name) to obtain a store, abort() , commit() , and events abort , complete , error .

IDBObjectStore

Represents a collection; key properties include name , keyPath , autoIncrement , and indexNames . Core methods: add , put , get , delete , clear , createIndex , openCursor , openKeyCursor , and counting utilities.

IDBIndex

Created with createIndex ; properties name , keyPath , unique , multiEntry . Supports the same query methods as IDBObjectStore (e.g., get , getAll , openCursor ).

IDBKeyRange

Static helpers to define query bounds: bound , only , lowerBound , upperBound . Instance properties lower , upper , lowerOpen , upperOpen describe the range.

IDBCursor / IDBCursorWithValue

Iterate over records without loading the entire result set. IDBCursorWithValue adds a value property for direct object access. Methods include continue , advance , delete , and update .

Conclusion

Within roughly fifteen minutes, developers can set up an IndexedDB database, define object stores and indexes, and perform full CRUD operations using asynchronous transactions, enabling robust client‑side storage for modern web applications.

References

W3C, MDN Web Docs, "A closer look at IndexedDB".