Hi everyone in this article, I’m explaining about indexeddb database.

Description:

In my previous article I discussed Web SQL Database in HTML 5. This article explains the IndexedDB database, its features and the differences between Web SQL and IndexedDB.

About IndexedDB:

This is new in the HTML 5 specification. It is not the same as a relational database. By using IndexedDB you can store a large number of objects locally. This is a new JavaScript API that is offered by HTML 5. The IndexedDB API is a specification for an indexed database that is present within our browser. As I said, it is not the same as a relational database so it does not have a table, rows and columns like a relational database. 

In a relational database, to store data we write a database query, like:

insert in <table_name>([column_1], [column_2]......[column_n]) values ([val_1],[val_2],.....,[val_n])

The same as for select, update and delete we have different queries that we also have used in a Web SQL Database. But as I said, an IndexedDB stores objects. So indexedDB has a different way to store and create objects. In this first you create an object to store a type of data; simply stated, we store JavaScript objects. The objects may have a simple value (like string, date and so on) or hierarchical objects (like JavaScript object or arrays). Each object consists of a key with its corresponding value and each object stores a collection of indexes that make it efficient to query and iteration can be fast across objects. In an IndexedDB the query is replaced by an index and the IndexedDB produces a cursor to be used to iterate across the result set.

The IndexedDB API is exposed through the window.indexedDB object. When you work on an IndexedDB, the following lines of code you should always use, to determine whether or not the browser supports IndexedDB:

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 
    if (!indexedDB) {
        alert("Your browser doesn't support IndexedDB ");
    }

Creating and Opening IndexedDB Database:

If we want to work on any database then the first step is to create a database then make a connection object to open the database.

Before creating the database I want to tell you about the two API modes of IndexedDB.

1-Synchronous mode: This mode was created to be used only with conjunction with web workers. But most browsers curently do not support the synchronous mode.

2-Asynchronous mode: Using this mode we get the benefits of having non-blocking operations, so if you have a large amount of data to store and you are on a low-power device with not much memory and I/O then you will never like that your web application has crashed while storing data. This is not a new concept in web applications but is a very nice concept.

Now how to create and open the IndexedDB database: By an asynchronous call of the open function of the IndexedDB API you can create an object for the database. If the database does not exist then it will first be created then the object for that database will be created. 

Syntax: 

var dbOpenRequest = indexedDB.open([Database_Name],[Version]);  

The Open function has the following 2 parameters: 

Database Name: This parameter is used as a name of the database that you want to

open. This is a required parameter. It's data type is string. 

• Version: This parameter specifies the version of the database. This parameter is

an optional parameter. It's data type is unsigned long number.

The Open function returns an IDBRequest object that fires events to indicate the

result of the request. This is an object that you can use to fire onsuccess and onerror

events.

Example:

The following example describes how to create a database or its object.

<script> 
    var dbObj; 
    var request = indexedDB.open('Mindstick', '1') 
    request.onsuccess = function (e) { 
        document.getElementById("result").innerHTML = "Database Opened :)"; 
        dbObj = request.result; 
    } 
    request.onerror = function (e) { 
        console.log("Error:" + e.target.errorCode) 
        document.getElementById("result").innerHTML = "Error! The Database connection not opened. Please See The Log"; 
    } 
</script> 
<p id="result"></p>

Output:

If you want to see whether or not the database is created then open the developers

tool and the output will look like this (in Chrome):

Creating an Object Store in IndexedDB:

The IndexedDB can hold one or more than one objectStores. objectStores again resemble a table in a relational database but not the same as a relational database, it is very different. They have key/value records and can have key paths, key generators and indexes. By using the createObjectStore function you can create an objectStore. The function createObjectStore takes the following parameters:

1.   Name: The name of the object store to be created. It's data type is DOMString.

2.      Optional Parameters: This optional parameter can hold any type of value. This parameter can have one or both of the following attributes:

        1. keyPath: A DOMString value specifying the keypath for the object store.

        2. autoIncrement: A boolean value indicates weather the key value automatically increases as a record is added to the object store.

Object stores also have indexes that will be used later when we retrieve data from the IndexedDB. By using the CreateIndex function you can create indexes in the object store. The createIndex takes the following parameters:

1.       Name: Name of the index. It's datatype is string.

2.       KeyPath: Name of the field to be indexed. It's datatype can be any.

3.       Optional Parameters: It's type is object. The optional parameters can have one or both of the following attributes:

1.Unique: It's type is Boolean and decides whether the index allows duplicate values. If the attribute value is true then a duplicate value is not allowed. If the attribute value is false then duplicate values are allowed. By default It's value is false.

2. multiEntry: A Boolean value that determines the results when multiple rows in the object match individual key values. The resulting object is an array, when it happens. If its value is true then the resulting array can contain only a single item; the key of the item contains an array of the matching values. When this parameter is false (the default), the result array contains one item for each item that matches the key value. (According to the MSDN.)

Note: Multi-entry indexes are not supported by a Windows Store app.

Example:

<script>
 
    var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.msIndexedDB;
 
    if (!indexedDB) {
        alert("Your browser doesn't support IndexedDB ");
    }
 
    var Employee_Record = [ { Name: "Kamlakar Singh", Email: "sample@sample.com", Location: "Allahabad" },
        { Name: "Rohit Kesharwani", Email: "rohit@rohit.com", Location: "Allahabad" },
        { Name: "Pawan Shukla", Email: "pawan@sample.com", Location: "Allahabad" },
    ];
 
    function initDB() {
        var dbObj;
        var request = indexedDB.open('Mindstick', '1')
        request.onsuccess = function (e) {
            document.getElementById("result").innerHTML = "Database Opened :)";
            dbObj = request.result;
        }
        request.onerror = function (e) {console.log("Error:" +e.target.errorCode)
            document.getElementById("result").innerHTML= "Error! The Database connection not opened. Please See The Log";
        }
        request.onupgradeneeded = function (e) {
            var objectStore = e.currentTarget.result.createObjectStore("DBObject", {keyPath: "id", autoIncrement: true });
 
            objectStore.createIndex("Name", "Name", {unique: false });
            objectStore.createIndex("Email", "Email", {unique: true });
            objectStore.createIndex("Location", "Location", {unique: false });
 
            for (i in Employee_Record) {
                objectStore.add(Employee_Record[i]);
            }
        };
    }
</script> 
 
 
<div>
    <buttonid="btnCreateStore"onclick="initDB()">Create Store</button>
    <Pid="result"></P>  
</div>

Output:

1. Initially when the page is loaded

2. After clicking on the Create store button

If you want to see whether or not the data was stored then open the developers tool then (in Chrome) go to the resource and then open the IndexedDB tab.
My stored output is as follows:

Transaction in IndexedDB:

If you have an object store and you want to perform CRUD(Create/Read/Update/Delete) operations, there is only one way to perform CRUD operations in IndexedDB, by using a transaction object (IDBTransaction). 

The IDBTransation object represents a group of operations made against a database. The IDBTransaction object can be created in 3 different modes:

1. read-only: This is the default mode. This mode does not allow changes. 
2. read/write: This mode allows changes.
3. version change: Objects in the database can be created using this mode.

Note: You should use read/write mode only when you are doing an update operation, in other cases always use read-only mode. Because read-only transactions can run concurrently.  

The transactions are asynchronous so you can wire a transaction to abort, error, and Complete events. 

Using the transaction function you can begin your transaction. The transaction function takes the following 2 parameters:

• Name: Name of the object store. Its datatype can be a string to specify a single value or can be a string array to specify multiple values.
• mode: This is an optional parameter. All the modes are discussed above.

Example:

 var transaction = db.transaction("MyObjectStore", IDBTransaction.READ_WRITE); 
    var objectStore = transaction.objectStore("MyObjectStore"); 
    var request = objectStore.add({ Name: Name, Email: Email, Location: Location }); 
    request.onsuccess = function (e) { 
        // do something when the add succeeded 
    }; 
    transaction.oncomplete = function (e) { 
        // do something after the transaction completed 
    }; 
    transaction.onabort = function (e) { 
        // do something after the transaction aborted 
    }; 
    transaction.onerrort = function (e) { 
        // do something after the transaction canceled 
    };

Retrieving Data from the IndexedDB:

Using the get method you can retrieve the records from the object store. The get

method accepts keys to retrieve data.

Example:

 <script> 
    var dbObj; 
    var request = indexedDB.open('Mindstick', '1') 
    request.onsuccess = function (e) { 
        dbObj = request.result; 
        var transaction = dbObj.transaction("DBObject"); 
        var objectStore = transaction.objectStore("DBObject"); 
        var str = ''; 
        var req = objectStore.get(1); 
        req.onsuccess = function (e) { 
            document.getElementById("result").innerHTML = "Name for id 1 " + req.result.Name + "<br/>Email: " + req.result.Email + "</br>Location: " + req.result.Location; 
        }; 
    } 
    request.onerror = function (e) { 
        console.log("Error:" + e.target.errorCode) 
        document.getElementById("result").innerHTML = "Error! The Database connection not opened. Please See The Log"; 
    } 
</script> 




<div> 

    <table id="tbl"> 
        <tr> 
            <td>Name</td> 
            <td>Email</td> 
            <td>Location</td> 
        </tr> 
    </table> 
    <p id="result"></p> 
</div>

Output:

In my previous post i'll explain about Developing Offline Web Application using HTML5