Working with IndexedDB Storage using HTML5

HTML 5 also introduces an IndexDb storage API just like SQL databases, which are high speed data access key value collection.  In this post, I am going to cover how to use IndexedDb storage using HTML 5 API.

On November 18, 2010, W3C announces that they are going to depreciate the addition to sql database but rather they will go with IndexedDB specification in HTML5.  So it is very important to learn how to use IndexedDb instead of proper SQL transaction as IndexedDb also supports transactions with few enhanced mode. Lets now look into the code on how to work with IndexedDb.

if ('webkitIndexedDB' in window) {
window.indexedDB = window.webkitIndexedDB;
window.IDBTransaction = window.webkitIDBTransaction;
}
else if ('moz_indexedDB' in window) {
window.indexedDB = window.moz_indexedDB;
}

if (window.indexedDB) {
idbRequest_ = window.indexedDB.open("Test", "A test object store.");
idbRequest_.onerror = idbError_;
idbRequest_.addEventListener('success', function(event) {
idb_ = event.srcElement.result;
idbShow_(event);
}, false);
}

In the above ode we have made sure whether indexedDb is available. As the specification is not yet standardized, we need to put special attention to check whether indexedDb is available for the current browser.  Once we get the object we call open to open a test database named  as “test”. The second argument specifies the description of the database.

To store the data object we need to use to following code :

var db = window.indexedDB;
var trans = db.transaction(["abhishek"], IDBTransaction.READ_WRITE, 0);
var store = trans.objectStore("abhishek");
var request = store.put({
"text": 'Hi, this is Abhishek',
"timeStamp" : new Date().getTime()
});

request.onsuccess = function(e) {
// Re-render all the data
};

request.onerror = function(e) {
// show e.value };
};

Here in the above code we have opened a transaction in READ_WRITE mode and created a store called abhishek. Now we put a JSON object inside the store so that we could get the data when we try to retrieve. Similar to all storage, it also takes two callbacks for success and error.

Now to retrieve the data from the store we use :

 var db = window.indexedDB;
var trans = db.transaction(["abhishek"], IDBTransaction.READ_WRITE, 0);
var store = trans.objectStore("abhishek");

// Get everything in the store;
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);

cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;

//write result.value
result.continue();
};

cursorRequest.onerror = function(e){
<pre>   };
};

So here the data is retrieved using a cursor and fetching all the data one by one. The result object will hold the actual data that has been stored inside indexedDb.

In the same way as above, you can use  var request = store.delete(id); to delete an element from object store.

I hope this helped you learning how to use IndexedDB storage.

Thank you for reading.