van an nguyen

Using IndexedDB: inserting data

Using IndexedDB: inserting data in an object store

Example 1: basic steps

Online example at JSBin:

Execute this example and look at the IndexedDB object store content from the Chrome dev tools (F12 or cmd-alt-i). One more customer should have been added.

Be sure to click on the “create database” button before clicking the “insert new customer” button.

example on JsBin for inserting data in IndexedDB

The next screenshot shows the IndexedDB object store in Chrome dev. tools (use the “Resources” tab). Clicking the “Create CustomerDB” database creates or opens the database, and clicking “Add a new Customer” button adds a customer named “Michel Buffa” into the object store:

Devtools show that a new customer named Michel Buffa has been inserted

Code from the example, explanations:

We just added a single function into the example from the previous section – the function AddACustomer() that adds one customer:

  1. { ssn: “123-45-6789”, name: “Michel Buffa”, age: 47, email:   “buffa@i3s.unice.fr” }

Here is the complete source code of the addACustomer function:

  1. function addACustomer() {
  2.    // 1 – get a transaction on the “customers” object store
  3.    // in readwrite, as we are going to insert a new object
  4.    var transaction = db.transaction([“customers”], “readwrite”);
  6.    // Do something when all the data is added to the database.
  7.    // This callback is called after transaction has been completely
  8.    // executed (committed)
  9.    transaction.oncomplete = function(event) {
  10.        alert(“All done!”);
  11.    };
  13.    // This callback is called in case of error (rollback)
  14.    transaction.onerror = function(event) {
  15.       console.log(“transaction.onerror errcode=” + event.target.error.name);
  16.    };
  18.    // 2 – Init the transaction on the objectStore
  19.    var objectStore = transaction.objectStore(“customers”);
  21.    // 3 – Get a request from the transaction for adding a new object
  22.    var request = objectStore.add({ ssn: “123-45-6789”,
  23.                                    name: “Michel Buffa”,
  24.                                    age: 47,
  25.                                    email: “buffa@i3s.unice.fr” });
  27.    // The insertion was ok
  28.    request.onsuccess = function(event) {
  29.        console.log(“Customer with ssn= “ + event.target.result + “
  30.                     added.”);
  31.    };
  33.    // the insertion led to an error (object already in the store,
  34.    // for example)
  35.    request.onerror = function(event) {
  36.        console.log(“request.onerror, could not insert customer,
  37.                     errcode = “ + event.target.error.name);
  38.    };
  39. }

Explanations:

In the code above, lines 4, 19 and 22 show the main calls you have to perform in order to add a new object to the store:

    1. Create a transaction.
    2. Map the transaction onto the object store.
    3. Create an “add” request that will take part in the transaction.

The different callbacks are in lines 9 and 14 for the transaction, and in lines 28 and 35 for the request.

You may have several requests for the same transaction. Once all requests have finished, the transaction.oncomplete callback is called. In any other case the transaction.onerror callback is called, and the datastore remains unchanged.

Here is the trace from the dev tools console:

Trace from the devtools console

Example 2: adding a form and validating inputs

Online example available at JSBin:

a form has been added to the previous example, for creating a new customer

You can try this example by following these steps:

    1. Press first the “Create database” button
    2. then add a new customer using the form
    3. click the “add a new Customer” button
    4. then press F12 or cmd-alt-i to use the Chrome dev tools and inspect the IndexedDB store content. Sometimes it is necessary to refresh the view (right click on IndexedDB/refresh), and sometimes it is necessary to close/open the dev. tools to have a view that shows the changes (press F12 or cmd-alt-i twice). Chrome dev. tools are a bit strange from time to time.

This time, we added some tests for checking that the database is open before trying to insert an element, and we added a small form for entering a new customer.

Notice that the insert will fail and display an alert with an error message if:

    • The ssn is already present in the database. This property has been declared as the keyPath (a sort of primary key) in the object store schema, and it should be unique: db.createObjectStore(“customers”, { keyPath: “ssn” });
    • The email address is already present in the object store. Remember that in our schema, the email property is an index that we declared as unique: objectStore.createIndex(“email”, “email”, { unique: true });
    • Try to insert the same customer twice, or different customers with the same ssn. An alert like this should pop up:

insert error

Here is the updated version of the HTML code of this example:

  1. <fieldset>
  2.   SSN: <input type=“text” id=“ssn” placeholder=“444-44-4444”
  3.               required/><br>
  4.   Name: <input type=“text” id=“name”/><br>
  5.   Age: <input type=“number” id=“age” min=“1” max=“100”/><br>
  6.   Email:<input type=“email” id=“email”/> reminder, email must be
  7.                unique (we declared it as a “unique” index)<br>
  8. </fieldset>
  10. <button onclick=“addACustomer();“>Add a new Customer</button>

And here is the new version of the addACustomer() JavaScript function:

  1. function addACustomer() {
  2.    if(db === null) {
  3.       alert(‘Database must be opened, 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.    // adds the customer data
  22.    var newCustomer={};
  23.    newCustomer.ssn = document.querySelector(“#ssn”).value;
  24.    newCustomer.name = document.querySelector(“#name”).value;
  25.    newCustomer.age = document.querySelector(“#age”).value;
  26.    newCustomer.email = document.querySelector(“#email”).value;
  27.    alert(‘adding customer ssn=’ + newCustomer.ssn);
  29.    var request = objectStore.add(newCustomer);
  31.    request.onsuccess = function(event) {
  32.      console.log(“Customer with ssn= “ + event.target.result + “
  33.                   added.”);
  34.      };
  36.   request.onerror = function(event) {
  37.      alert(“request.onerror, could not insert customer, errcode = “
  38.            + event.target.error.name +
  39.            “. Certainly either the ssn or the email is already
  40.            present in the Database”);
  41.   };
  42. }

It is also possible to shorten the code of the above function by chaining the different operations using the “.” operator (getting a transaction from the db, opening the store, adding a new customer, etc.).

Here is the short version:

  1. var request = db.transaction([“customers”], “readwrite”)
  2. .objectStore(“customers”)
  3. .add(newCustomer);

The above code does not perform all the tests, but you may encounter such a way of coding (!).

Also, note that it works if you try to insert empty data:

devtools show that inserting blank data works

Indeed, entering an empty value for the keyPath or for indexes is a valid value (in the IndexedDB sense). In order to avoid this, you should add more JavaScript code. We will let you do this as an exercise.

 Previous

Leave a comment