What is the difference between put() and add() in IndexedDB?

Rana Sunny 875 03 Jul 2025

In IndexedDB, both put() and add() are used to store data in an object store, but they have different behaviors when it comes to existing records.

add()

Adds a new record only if the key does not already exist. Throws an error if a record with the same key already exists. Used when you want to prevent overwriting existing data.

Example:

const request = objectStore.add({ id: 1, name: "Alice" }); // Fails if id 1 already exists

put()

Adds a new record or updates an existing record with the same key. Overwrites if the key already exists. Used when you want to upsert (insert or update) data.

Example:

const request = objectStore.put({ id: 1, name: "Alice" }); // Adds if not exists, updates if exists

Summary Table

Feature	`add()`	`put()`
Add new record	Yes	Yes
Update existing	(throws error)	(replaces existing data)
Error on duplicate key	Yes	No
Use case	Prevent overwriting	Upsert behavior

Use Guidelines

Use add() when:
- You want to ensure no duplicates.
- You're inserting new data only.
Use put() when:
- You want to update or insert.
- You're okay with overwriting existing data.

Here are code examples with error handling for both add() and put() in IndexedDB:

Setup (for both examples)

const request = indexedDB.open("TestDB", 1);

request.onupgradeneeded = function (event) {
    const db = event.target.result;
    if (!db.objectStoreNames.contains("users")) {
        db.createObjectStore("users", { keyPath: "id" });
    }
};

Using `add()` (fails on duplicate key)

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

    const user = { id: 1, name: "Alice" };
    const addRequest = store.add(user);

    addRequest.onsuccess = () => {
        console.log("User added successfully.");
    };

    addRequest.onerror = (event) => {
        console.error("Add failed:", event.target.error); // e.g., ConstraintError if id=1 exists
    };
};

Using `put()` (updates if exists)

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

    const user = { id: 1, name: "Alice Updated" };
    const putRequest = store.put(user);

    putRequest.onsuccess = () => {
        console.log("User added or updated successfully.");
    };

    putRequest.onerror = (event) => {
        console.error("Put failed:", event.target.error);
    };
};

Note:

In the add() example, trying to insert id: 1 again will cause a ConstraintError.
In the put() example, it will silently overwrite if id: 1 already exists.

interview

What is the difference between put() and add() in IndexedDB?

Can you answer this question?

1 Answers

add()

Example:

put()

Example:

Summary Table

Use Guidelines

Setup (for both examples)

Using add() (fails on duplicate key)

Using put() (updates if exists)

Note:

Using `add()` (fails on duplicate key)

Using `put()` (updates if exists)