van an nguyen

Using IndexedDB: removing data

Using IndexedDB: removing data from an object store

Let’s move to the next online example at JSBin:

devtools show that a customer has been removed once clicked on the remove customer button

See the changes in Chrome dev. tools: refresh the view (right click/refresh) or press F12 or cmd-alt-i twice. There is a bug in the refresh feature with some versions of Google Chrome.

How to try the example:

    1. Be sure to click the “create database button” to open the existing database.
    2. Then use Chrome dev tools  to check that the customer with ssn=444-44-444 exists. If it’s not there, just insert into the database like we did earlier in the course.
    3. Right click on indexDB in the Chrome dev tools and refresh the display of the IndexedDB’s content if necessary if you cannot see customerwith ssn=444-44-444. Then click on the “Remove Customer ssn=444-44-4444(Bill)” button. Refresh the display of the database. The ‘Bill’ object should have disappeared!

Code added in this example:

  1. function removeACustomer() {
  2.    if(db === null) {
  3.       alert(‘Database must be opened first, please click the
  4.              Create 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=” +
  17.                    event.target.error.name);
  18.    };
  20.    var objectStore = transaction.objectStore(“customers”);
  22.    alert(‘removing customer ssn=444-44-4444’);
  23.    var request = objectStore.delete(“444-44-4444”);
  25.    request.onsuccess = function(event) {
  26.       console.log(“Customer removed.”);
  27.    };
  29.    request.onerror = function(event) {
  30.       alert(“request.onerror, could not remove customer, errcode
  31.             = “ + event.target.error.name + “. The ssn does not
  32.             exist in the Database”);
  33.    };
  34. }

Notice that after the deletion of the Customer (line 23), the request.onsuccess callback is called. And if you try to print the value of the event.target.result variable, it is “undefined“.

Short way of doing the delete:

It is also possible to shorten the code of the above function a lot by concatenating the different operations (getting the store from the db, getting the request, calling delete, etc.). Here is the short version:

  1. var request = db.transaction([“customers”], “readwrite”)
  2. .objectStore(“customers”)
  3. .delete(“444-44-4444”);

Leave a comment