How to implement IndexedDB in cordova

Posted By : Abhishek Banerjee | 09-Dec-2014

Description

There are various ways to store data at client side and one of them is Indexed DB. It is an standard API supported by many browsers. It is a JavasScript based object oriented database and also a transactional based database system like RDMS. It was proposed by Oracle in 2009. It stores each records (or value) with a unique key (or index), which makes data retrieval speedy and consistent. We can store large amount of data such as images, arrays, maps and objects using this database system which is not supported by web storage. There is no size limit for data items or the database itself but browsers may impose the limits and that varies from browser to browser.

Supports the following platforms:

BlackBerry 10
Windows Phone 8
Windows 8

IndexedDB Interfaces

1) Connecting to a database

IDBEnvironment
IDBFactory
IDBOpenDBRequest
IDBDatabase
IDBRequest

2) Retrieving and modifying data

IDBTransaction
IDBObjectStore
IDBIndex
IDBCursor
IDBCursorWithValue
IDBKeyRange

3) Custom event interfaces

IDBVersionChangeEvent

Implementation

1) Opening a database:

 var DBOpenrequest= window.indexedDB.open (“employeeRecord”, 1);

/* 
employeeRecord— Name of the database (if exists then opened otherwise created)
1—- Version no. of the database
*/ 

DBOpenrequest.onsuccess= function (){
console.log(“database initialised”)
var DBresult= DBOpenrequest.result;
}

DBOpenrequest.onerror = function (){
console.log(“error loading database”)
}

// If database did not previously exists, create object store and indexes.

DBOpenrequest.onupgradeneeded = function(){

var DBresult= DBOpenrequest.result;

// Create an object store for the database ‘employeeRecord’

var empObjectStore= DBresult.createObjectStore(“empList”, {keypath: “empID,  autoIncrement : true”});

/*
keypath— a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path.
autoIncrement— key is auto incremented(if it is true) with every new object store
*/ 

 // define what data items the empObjectStore will contain.

empObjectStore.createIndex(“empFirstName”,”Fname”,{ unique: false });

empObjectStore.createIndex(“empLastName”,”Lname”,{ unique: false });

empObjectStore.createIndex(“empDepartment”,”Dept”,{ unique: false });

empObjectStore.createIndex(“empProject”,”Project”,{ unique: false });

2) Populating the database with data

empObjectStore.put({Fname: “Fred”, Lname:”Williams”, Dept:”Development”, Project: “Project1”});

empObjectStore.put({Fname: “Georgy”, Lname:”Jackman”, Dept:”Development”, Project: “Project2”});

empObjectStore.put({Fname: “Maratha”, Lname:”Conner”, Dept:”Management”, Project: “Project3”});

}

3) Searching for an record in object store

var trans= DBresult.transaction(“empList”, “readwrite”)

var empStore= trans.objectStore(“empList”);

var ind= empStore.index(“ empDepartment”);

var res= ind.get (“Management”);

res.onsuccess= function(){
alert (“entry exists”);
}

4) Closing Database Connection