Data Persistence in Browser with JavaScript Part-1

Sunday, June 18th, 2017

IndexedDB:

Unlike SQL databases that use columns to represent different attributes of schema IndexedDB uses JavaScript objects to represent data. Also indexedDB is very fast due to the indexing feature. The indexing feature allows developers to do high performance searches where the objects are indexed with a key. More over it has asynchronous APIs and is able to store much larger data compared to 'Web Storage'. The storage limit is calculated at 50% of the available memory on the hard drive. So in the case if the available memory on the hard drive is 100 GB then the limit for indexedDB would be 50 GB.

Opening an IndexedDB database:

let request = window.indexedDB.open("test-database", 1);

The 'window.indexedDB.open("test-database", 1)' function call opens a database with its name set to 'test-database' and version number to '1'. This means that the schema structure will be specific to the version number and if the schema structure needs to be updated then version number will also be updated.

The code below shows sample usage for indexedDB:

let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

let dbOpen = indexedDB.open("SampleDataBase", 1);

dbOpen.onupgradeneeded = function() {
    let db = dbOpen.result;
    let store = db.createObjectStore("SampleObjectStore", {keyPath: "id"});
    let index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};

dbOpen.onsuccess = function() {

    let db = dbOpen.result;
    let transaction = db.transaction("SampleObjectStore", "readwrite");
    let store = transaction.objectStore("SampleObjectStore");
    let index = store.index("NameIndex");

    // add data
    store.put({id: 1000, name: {first: "Edward", last: "Jones"}});
    store.put({id: 1, name: {first: "John", last: "Hancock"}});
    
    // query
    let getUser1 = store.get(1000);
    let getUser2 = index.get(["Hancock", "John"]);

    getUser1.onsuccess = function() {
        console.log(getUser1.result.name.last);  // Jones
    };

    getUser2.onsuccess = function() {
        console.log(getUser2.result.name.last);   // Hancock
    };

    // close db when transaction is done
    transaction.oncomplete = function() {
        db.close();
    };
}

In the sample code it can inferred that there are three main sections each for indexedDB instantiation, 'onupgradeneeded' callback and 'onsuccess' callback.

Instantiating indexedDB:

For instantiating indexedDB the following method is used 'indexedDB.open("SampleDataBase", 1);'. The "SampleDataBase" argument is the name that is used to identify this particular database. The version number is set to '1' which identifies a particular database schema. If the schema needs to be changed then the version number will also need to be changed.

'onupgradeneeded' callback:

This method is called when the version number of the database is updated or when a database is created first time with a new version number. In this example this method was called because a new database was created using 'indexedDB.open()' method. More over in this method objectStore is created using 'db.createObjectStore()' method. Also the index is created on the schema using 'store.createIndex()' .

'onsuccess' callback:

For this use case the 'onsuccess' callback fires after the 'onupgradeneeded' callback. In this example this 'onsuccess' callback is specific to 'indexedDB.open()' method. The db transaction is created by using 'db.transaction("SampleObjectStore", "readwrite")' method where 'SampleObjectStore' is the object store created previously and 'readwrite' is the permission for the transaction. The database can be searched via two ways using 'index.get()' and 'store.get()'. Using 'index.get()' method the last name and first name are passed and this returns the result. Also using 'store.get()' method the id can be passed for querying the database. After transaction is complete the 'transaction.oncomplete' callback fires and the database is closed.