Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

home / developersection / interviews / what is the difference between put() and add() in indexeddb?
Ask Question
Rana Sunny
Rana Sunny

Student

Sunny Rana (born 25 December 1987) is an Indian cricketer. He made his List A debut for Uttarakhand in the 2018–19 Vijay Hazare Trophy on 20 September 2018. He made his first-class debut for Uttarakhand in the 2018–19 Ranji Trophy on 1 November 2018. He made his Twenty20 debut for Uttarakhand in the 2018–19 Syed Mushtaq Ali Trophy on 21 February 2019.

Message

1 Answers

Rana Sunny
Rana Sunny 03 Jul 2025
Report Abuse

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.
MindStick Training