Working with Indexed Databases in HTML5

10/14/13

 

Introduction

As the world moves to more powerful web applications, the need to support offline data requirements is omnipresent. The HTML5 specification has provisions to support storing key value pairs through the WEBSTORAGE API. However WEBSTORAGE foes not support in-order key retrieval, efficient search and duplicate value storage.

Enter “Indexed Database”, an API in the HTML5 specification defined for a database of records which hold simple values in a key-value format. The records are indexed so it allows for efficient search, in-order key retrieval and storing duplicate values.

 

The specification says…

The HTML5 specification for indexed databases is described at http://www.w3.org/TR/IndexedDB/

Implementation of Indexed database relies on using transactional databases which store keys and their values, and is implemented using b-trees.

Since the demise of the draft specification for Web SQL Database API http://www.w3.org/TR/webdatabase, the HTML5 committee has adopted indexed databases in its favor. Indexed databases standout from classic SQL databases in that they are really an object store – they are not structured, so you can support any type which JavaScript supports and add it to your database.

 

Like SQL databases, indexed databases support indexing which enabled efficient searching and iterating.

To open an indexed database, call IndexedDB.open and pass it the name of the database you need to open. If the named database does not exist, it will be created.

var indexDatabaseRequest = indexedDB.Open (“myindexedDB”);

 

Once the database is available, you can specify the schema of the database (if the database did not exist before). We will create an “employee” table with fields “lastName”, “employeeID” and “SSN”. We will also create index on SNN and employeeID.

indexDatabaseRequest.onupgradeneeded = function()

{

var indexDatabase = indexDatabaseRequest.result;

var objectStore = indexDatabase.CreateObjectStore(“employee”, {keypath: “lastName”});

var employeeIDIndex = objectStore.createIndex(“by_employeeID”, “employeeID”, {unique:true});

var ssnIndex = objectStore.createIndex(“by_SSN”, “SSN”, {unique:true});

 

objectStore.put({lastName: “McEnroe”, employeeID: “1”, SSN: “111-11-1111”});

objectStore.put({lastName: “Graf”, employeeID: “2”, SSN: “222-22-2222”});

objectStore.put({lastName: “Becker”, employeeID: “3”, SSN: “333-33-3333”});

};

indexDatabaseRequest.onsuccess = function()

{

indexDatabase = indexDatabaseRequest.result;

}

In the above snippet, we use the put API on the objectStore to add rows to the database.

To add a row in the database, you can use the “put” API on the ObjectStore.

var myTransaction = indexDatabase.transaction(“employee”, “readwrite”);

var objectStore = myTransaction.objectStore(“employee”);

objectStore.put({({lastName: “Nadal”, employeeID: “4”, SSN: “444-44-4444”}});

myTransaction.oncomplete = function()

{

}

To query an indexed database, you create a variable to represent the index and specify a request on that index. The querying operation should be encapsulated in a transaction.

var myQueryTransaction = indexDatabase.transaction(“employee”, “readonly”);

var objectStore = myQueryTransaction.objectStore(“employee”);

var queryIndex = objectStore.index(“by_employeeID”)l

 

var searchRequest = queryIndex.get(“4”);

searchRequest.onsuccess = function()

{

var match = searchRequest.result;

if(match !== undefined)

{

document.getElementById(‘inputEmployeeID’).value = match.employeeID;

report(match.employeeID, match.SSN, match.lastName);

}

else

{

report (null);

}

};

 

Support in browsers

Indexed database is supported by most modern browsers such as the latest versions of Firefox, Chrome and Internet Explorer. Note that support for indexed database APIs can be broken in beta versions of certain browsers.

 

Summary

In this article, we learned about indexed databases and how you can use them in HTML5 powered web applications.

 

References

http://www.w3.org/TR/IndexedDB/

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com