HTML IndexedDB Update

Introduction

IndexedDB is a low-level browser API for storing large amounts of structured data offline. Once you have records in an object store, you will often need to update them—change a user’s profile, mark a task complete, or refresh cached content from a form.

This tutorial focuses specifically on updating records in IndexedDB: using put() to replace data, the get()→modify→put() pattern for partial changes, running everything inside readwrite transactions, and handling errors when a record is missing.

What You’ll Learn

What Is IndexedDB?

IndexedDB is a client-side, transactional database for storing JavaScript objects, files, and blobs. Data lives in object stores inside a named database. Each record is keyed by a keyPath property (such as id) or an auto-generated key.

Unlike localStorage, IndexedDB supports indexes, large datasets, and asynchronous operations that do not block the UI. It is the recommended replacement for the deprecated Web SQL API and the right choice for offline-capable web apps.

How to Update Records in IndexedDB

To update a record, follow these steps inside a single readwrite transaction:

1. Open a transaction — db.transaction(['storeName'], 'readwrite')
2. Access the object store — transaction.objectStore('storeName')
3. Retrieve the record (optional) — store.get(key) when you need to change only some fields
4. Modify and save — change properties on the object, then store.put(record)

Example Code

const request = indexedDB.open('myDatabase', 1);

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction(['contacts'], 'readwrite');
  const store = tx.objectStore('contacts');

  const getRequest = store.get(1);

  getRequest.onsuccess = function () {
    const record = getRequest.result;

    if (record) {
      record.name = 'Updated Name';
      record.email = 'updated@example.com';

      const putRequest = store.put(record);

      putRequest.onsuccess = function () {
        console.log('Record updated successfully');
      };

      putRequest.onerror = function (event) {
        console.error('Put failed:', event.target.error.message);
      };
    } else {
      console.warn('Record not found for id 1');
    }
  };
};

request.onerror = function (event) {
  console.error('Database error:', event.target.error.message);
};

If you already know every field value, you can skip get() and call put() directly with the full updated object.

Using Transactions

Transactions group operations so they succeed or fail together. Updates always require 'readwrite' mode:

const tx = db.transaction(['contacts'], 'readwrite');

tx.oncomplete = function () {
  console.log('Transaction committed — update saved');
};

tx.onerror = function (event) {
  console.error('Transaction aborted:', event.target.error.message);
};

const store = tx.objectStore('contacts');
store.put({ id: 1, name: 'Jane Smith', email: 'jane@example.com' });

Keep get() and put() in the same transaction when doing read-modify-write. Starting a new transaction between read and write risks stale data if another tab updates the record in between.

Handling Errors

Handle errors when opening the database, reading a record, and writing the update. Use event.target.error.message (not the legacy errorCode):

const openReq = indexedDB.open('myDatabase', 1);

openReq.onerror = function (event) {
  console.error('Open error:', event.target.error.message);
};

openReq.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction(['contacts'], 'readwrite');
  const store = tx.objectStore('contacts');

  const getReq = store.get(42);

  getReq.onsuccess = function () {
    if (!getReq.result) {
      console.warn('No record with id 42 — nothing to update');
      return;
    }
    store.put({ ...getReq.result, name: 'New name' });
  };

  getReq.onerror = function (event) {
    console.error('Get error:', event.target.error.message);
  };

  tx.onerror = function (event) {
    console.error('Transaction error:', event.target.error.message);
  };
};

• Missing record — get() succeeds but result is undefined; show a user-friendly message.
• Quota exceeded — the browser may reject large writes; catch transaction errors and prompt the user.
• Closed connection — do not use a db reference after db.close().

Common Pitfalls

• Replacing the whole object — put() does not merge fields. If you put({ id: 1, name: 'New' }) without other properties, those fields are lost unless you copied them from get().
• Wrong transaction mode — put() in a readonly transaction throws immediately.
• Key mismatches — the id in your object must match the store’s keyPath. A typo means a new record or a failed write.
• Concurrency — IndexedDB serializes transactions per origin, but design updates to be idempotent when possible (e.g. always read before write).
• Using add() for updates — add() fails on existing keys; use put() instead.

Examples Gallery

These examples show common IndexedDB update patterns. Use Try It Yourself to run live demos in the editor.

const tx = db.transaction(['contacts'], 'readwrite');
const putReq = tx.objectStore('contacts').put({
  id: 1,
  name: 'Jane Doe',
  email: 'jane.updated@example.com'
});

putReq.onsuccess = function () {
  console.log('Contact id 1 updated');
};

Contact id 1 updated

const tx = db.transaction(['notes'], 'readwrite');
const store = tx.objectStore('notes');

const getReq = store.get(1);

getReq.onsuccess = function () {
  const record = getReq.result;
  if (!record) {
    console.warn('Note not found');
    return;
  }

  record.title = 'Updated title';
  record.updatedAt = Date.now();
  store.put(record);
};

title: "Updated title"
body: (unchanged)
updatedAt: 1717584123456

function updateContact(db, id, changes) {
  return new Promise(function (resolve, reject) {
    const tx = db.transaction(['contacts'], 'readwrite');
    const store = tx.objectStore('contacts');
    const getReq = store.get(id);

    getReq.onsuccess = function () {
      const record = getReq.result;
      if (!record) {
        reject(new Error('Contact ' + id + ' not found'));
        return;
      }
      Object.assign(record, changes);
      store.put(record);
    };

    tx.oncomplete = function () { resolve(); };
    tx.onerror = function () { reject(tx.error); };
  });
}

updateContact(db, 1, { name: 'Sam Lee' })
  .then(function () { console.log('Updated'); })
  .catch(function (err) { console.error(err.message); });

Updated

function toggleTaskDone(db, taskId) {
  const tx = db.transaction(['tasks'], 'readwrite');
  const store = tx.objectStore('tasks');

  store.get(taskId).onsuccess = function (event) {
    const task = event.target.result;
    if (task) {
      task.done = !task.done;
      store.put(task);
    }
  };
}

toggleTaskDone(db, 5); /* flips task.done true ↔ false */

task 5: done changed from false → true

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IndexedDB Update Example</title>
</head>
<body>
  <h1>IndexedDB Update Example</h1>
  <button type="button" id="update">Update Record</button>
  <p id="status"></p>

  <script>
    let db;

    const request = indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function (event) {
      event.target.result.createObjectStore('items', { keyPath: 'id' });
    };

    request.onsuccess = function (event) {
      db = event.target.result;

      const seedTx = db.transaction(['items'], 'readwrite');
      seedTx.objectStore('items').put({ id: 1, value: 'Original Value' });

      document.getElementById('update').addEventListener('click', function () {
        const tx = db.transaction(['items'], 'readwrite');
        const store = tx.objectStore('items');
        const getReq = store.get(1);

        getReq.onsuccess = function () {
          const record = getReq.result;
          if (record) {
            record.value = 'Updated Value';
            store.put(record);
          } else {
            document.getElementById('status').textContent = 'Record not found';
          }
        };

        tx.oncomplete = function () {
          document.getElementById('status').textContent =
            'Record updated successfully';
        };
      });
    };

    request.onerror = function (event) {
      document.getElementById('status').textContent =
        'Error: ' + event.target.error.message;
    };
  </script>
</body>
</html>

Record updated successfully

🚀 Common Use Cases

• Profile edits — save updated name, avatar URL, or preferences locally.
• Task completion — toggle done on todo items offline.
• Draft autosave — overwrite the same draft id as the user types.
• Cache refresh — update stale API responses stored for offline use.
• Sync queues — mark outbound sync jobs as sent after upload.

📝 Notes

• put() replaces the entire stored object—not individual fields in isolation.
• Use get() + modify + put() when updating one property of a large record.
• Updates require a readwrite transaction on the correct store name.
• put() on a missing key creates a new record (upsert behavior).
• Check getReq.result before updating to avoid silent upserts.
• Pair with Retrieve to verify changes after an update.

💡 Best Practices