JavaScript IndexedDB

IndexedDB is a low-level client-side database that allows large amounts of structured data to be stored in the browser. It is asynchronous, transactional, and supports key-value storage.

1. Why Use IndexedDB?

✅ Stores large amounts of data (better than localStorage).
✅ Works offline and persists data.
✅ Supports transactions, indexes, and queries.
✅ Asynchronous and non-blocking.

2. Basic IndexedDB Workflow 🛠️

Step 1: Open (or Create) a Database

let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = function(event) {
    console.log("Database opened successfully");
};

request.onerror = function(event) {
    console.log("Error opening database", event.target.error);
};

🔹 indexedDB.open("MyDatabase", 1) – Opens the database (version 1).
🔹 onupgradeneeded – Runs once when a new database or version is created.
🔹 createObjectStore("users") – Creates a table-like store with id as the primary key.

Step 2: Add Data

function addUser(name, age) {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readwrite");
        let store = transaction.objectStore("users");

        let user = { name: name, age: age };
        let addRequest = store.add(user);

        addRequest.onsuccess = function() {
            console.log("User added:", user);
        };

        addRequest.onerror = function() {
            console.log("Error adding user");
        };
    };
}

addUser("Alice", 25);

🔹 Uses transaction("users", "readwrite") to add data.
🔹 store.add(user) adds a new entry.
🔹 Runs onsuccess or onerror callbacks.

Step 3: Read Data

function getUser(id) {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readonly");
        let store = transaction.objectStore("users");

        let getRequest = store.get(id);

        getRequest.onsuccess = function() {
            if (getRequest.result) {
                console.log("User found:", getRequest.result);
            } else {
                console.log("User not found");
            }
        };

        getRequest.onerror = function() {
            console.log("Error fetching user");
        };
    };
}

getUser(1);

🔹 Uses store.get(id) to fetch data.

Step 4: Update Data

function updateUser(id, newName, newAge) {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readwrite");
        let store = transaction.objectStore("users");

        let getRequest = store.get(id);

        getRequest.onsuccess = function() {
            let user = getRequest.result;
            if (user) {
                user.name = newName;
                user.age = newAge;
                let updateRequest = store.put(user);
                
                updateRequest.onsuccess = function() {
                    console.log("User updated:", user);
                };
            }
        };
    };
}

updateUser(1, "Bob", 30);

🔹 Uses store.put(user) to update existing data.

Step 5: Delete Data

function deleteUser(id) {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readwrite");
        let store = transaction.objectStore("users");

        let deleteRequest = store.delete(id);

        deleteRequest.onsuccess = function() {
            console.log("User deleted:", id);
        };
    };
}

deleteUser(1);

🔹 Uses store.delete(id) to remove an entry.

Step 6: Fetch All Data

function getAllUsers() {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readonly");
        let store = transaction.objectStore("users");

        let users = [];
        let cursorRequest = store.openCursor();

        cursorRequest.onsuccess = function(event) {
            let cursor = event.target.result;
            if (cursor) {
                users.push(cursor.value);
                cursor.continue();
            } else {
                console.log("All users:", users);
            }
        };
    };
}

getAllUsers();

🔹 Uses store.openCursor() to loop through all records.

7. Using Indexes for Searching 🔎

Indexes improve search performance for non-primary key fields.

Add an Index

Modify onupgradeneeded:

db.createObjectStore("users", { keyPath: "id", autoIncrement: true })
  .createIndex("name", "name", { unique: false });

Search by Name

function searchUserByName(name) {
    let request = indexedDB.open("MyDatabase", 1);

    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction("users", "readonly");
        let store = transaction.objectStore("users");
        let index = store.index("name");

        let searchRequest = index.get(name);

        searchRequest.onsuccess = function() {
            console.log("User found:", searchRequest.result);
        };
    };
}

searchUserByName("Alice");

🔹 Uses .createIndex("name", "name") to create an index.
🔹 Uses index.get(name) to search for a user by name.

8. Deleting the Database

let deleteRequest = indexedDB.deleteDatabase("MyDatabase");

deleteRequest.onsuccess = function() {
    console.log("Database deleted successfully");
};

🔹 Removes the entire database from the browser.

9. IndexedDB vs Other Storage Methods

Feature	IndexedDB	localStorage	sessionStorage	Web SQL (Deprecated)
Data Size	Large (MBs/GBs)	5MB	5MB	Large
Structure	Object Store	Key-Value	Key-Value	Tables
Asynchronous?	✅ Yes	❌ No	❌ No	✅ Yes
Indexed Queries?	✅ Yes	❌ No	❌ No	✅ Yes
Transactions?	✅ Yes	❌ No	❌ No	✅ Yes
Works Offline?	✅ Yes	✅ Yes	❌ No	✅ Yes

Conclusion 🎯

✅ IndexedDB is perfect for storing large, structured data in the browser.
✅ Supports transactions, indexes, and queries.
✅ Asynchronous, so it does not block the UI.
✅ Can store JSON objects instead of simple strings.

💡 Need help implementing IndexedDB in your project? Let me know!

Souy Soeng

JavaScript IndexedDB