van an nguyen

Using IndexedDB: modifying data

Using IndexedDB: modifying data from an object store

We used request.add(object) to add a new customer and request.delete(keypath) to remove a customer. Now, we will use request.put(keypath) to update a customer!

Online example at JSBin:

devtools show a customer being updated in IndexedDB

The above screenshot shows how we added an empty customer with ssn=””, (we just clicked on the open database button, then on the “add a new customer button” with an empty form).

Now, we fill the name, age and email input fields to update the object with ssn=”” and click on the “update data about an existing customer” button. This updates the data in the object store, as shown in this screenshot:

devtools show updated customer

Here is the new code added to our example:

  1. function updateACustomer() {
  2.    if(db === null) {
  3.      alert(‘Database must be opened first, please click the Create
  4.             CustomerDB Database first’);
  5.      return;
  6.    }
  8.    var transaction = db.transaction([“customers”], “readwrite”);
  10.    // Do something when all the data is added to the database.
  11.    transaction.oncomplete = function(event) {
  12.      console.log(“All done!”);
  13.    };
  15.    transaction.onerror = function(event) {
  16.      console.log(“transaction.onerror errcode=” + event.target.error.name);
  17.    };
  19.    var objectStore = transaction.objectStore(“customers”);
  21.    var customerToUpdate={};
  22.    customerToUpdate.ssn = document.querySelector(“#ssn”).value;
  23.    customerToUpdate.name = document.querySelector(“#name”).value;
  24.    customerToUpdate.age = document.querySelector(“#age”).value;
  25.    customerToUpdate.email = document.querySelector(“#email”).value;
  27.    alert(‘updating customer ssn=’ + customerToUpdate.ssn);
  28.    var request = objectStore.put(customerToUpdate);
  30.    request.onsuccess = function(event) {
  31.      console.log(“Customer updated.”);
  32.    };
  34.    request.onerror = function(event) {
  35.      alert(“request.onerror, could not update customer, errcode= “ +
  36.         event.target.error.name + “. The ssn is not in the
  37.         Database”);
  38.   };
  39. }

The update occurs at line 28.

Leave a comment