This post is a part 42 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to use HTML5 IndexedDB storage in Intel XDK APP. We will also see how to provide an support for non-HTML5 browsers too.
What is IndexedDB?
IndexedDB is a object oriented local database supported by HTML5 browsers. MySQL has databases, tables, columns and rows to store data whereas IndexedDB has database, object store, index and objects to store data respectively. IndexedDB is made object oriented so that you don’t have to learn SQL to work with database.
What if WebView doesn’t support IndexedDB?
Some browser don’t support IndexedDB. So you can include third-party IndexedDB plugin in your app. This plugin adds support for IndexedDB.
Understanding how IndexedDB Works?
IndexedDB allows you to create object stores. Object stores are similar to SQL tables. Objects inside a store behave like rows. Every object store has a key and indexes. Key behaves like a SQL primary index and indexes are similar to other columns in SQL which can be searched by the key.
A object store may or may not have a key. In Indexed DB a database is identified by a name and version. When you create a new version with the same name then the old one is deleted.
IndexedDB API is completely asynchronous.
Requesting Access to IndexedDB and Creating a Object Store
Here is the code to request access to IndexedDB and create a store.
//provide database name and version number
var request = indexedDB.open("qnimate", 1);
var db = null;
request.onupgradeneeded = function(){
db = request.result;
//create object store and define key property of the objects on that store i.e., primary index. Here "ID" is the key
var store = db.createObjectStore("qnimate_store", {keyPath: "ID", autoIncrement: false});
//define other properties of the objects of that store i.e., define other columns.
store.createIndex("name", "name", {unique: true});
store.createIndex("age", "age", {unique: false});
store.createIndex("serialnumber", "serialnumber", {unique: true});
}
request.onsuccess = function(){
//database connection established
db = request.result;
}
request.onerror = function(){
console.log("An error occured while connecting to database");
}
var request = indexedDB.open("qnimate", 1);
var db = null;
request.onupgradeneeded = function(){
db = request.result;
//create object store and define key property of the objects on that store i.e., primary index. Here "ID" is the key
var store = db.createObjectStore("qnimate_store", {keyPath: "ID", autoIncrement: false});
//define other properties of the objects of that store i.e., define other columns.
store.createIndex("name", "name", {unique: true});
store.createIndex("age", "age", {unique: false});
store.createIndex("serialnumber", "serialnumber", {unique: true});
}
request.onsuccess = function(){
//database connection established
db = request.result;
}
request.onerror = function(){
console.log("An error occured while connecting to database");
}
onupgradeneeded is executed if database doesn’t exist already or if the version number is changed. onsuccess event is executed after onupgradeneeded event.
Adding Objects to Object Store
Here is the code to add objects to object store
var object1 = {name: "Narayan", age: "22", ID: "d3223", serialnumber: 1};
var object2 = {name: "QNimate", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);
var object2 = {name: "QNimate", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);
Find a Object
To find a single object from object store you must use the key.
var read_transition = db.transaction("qnimate_store", "readonly");
var store = read_transition.objectStore("qnimate_store");
var row = store.get("d3223");
row.onsuccess = function(evt){
console.log("Name is: " + row.result.name);
console.log("ID is: " + row.result.ID);
console.log("Age is: " + row.result.age);
console.log("Serial Number: " + row.result.serialnumber);
}
var store = read_transition.objectStore("qnimate_store");
var row = store.get("d3223");
row.onsuccess = function(evt){
console.log("Name is: " + row.result.name);
console.log("ID is: " + row.result.ID);
console.log("Age is: " + row.result.age);
console.log("Serial Number: " + row.result.serialnumber);
}
Get all Objects
You can also get all objects from the object store
var read_transition = db.transaction("qnimate_store", "readonly");
var store = read_transition.objectStore("qnimate_store");
var rows = store.openCursor()
rows.onsuccess = function(evt){
var cursor = evt.target.result;
if(cursor)
{
console.log("Name is: " + cursor.value.name);
console.log("ID is: " + cursor.key);
console.log("Age is: " + cursor.value.age);
console.log("Serial Number: " + cursor.value.serialnumber);
cursor.continue();
}
}
var store = read_transition.objectStore("qnimate_store");
var rows = store.openCursor()
rows.onsuccess = function(evt){
var cursor = evt.target.result;
if(cursor)
{
console.log("Name is: " + cursor.value.name);
console.log("ID is: " + cursor.key);
console.log("Age is: " + cursor.value.age);
console.log("Serial Number: " + cursor.value.serialnumber);
cursor.continue();
}
}
Delete a Object
To delete a object you need to use the key to identify the object.
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
var deleted_row = store.delete("d3223");
deleted_row.onsuccess = function(event){
console.log("Deleted");
}
var store = write_transition.objectStore("qnimate_store");
var deleted_row = store.delete("d3223");
deleted_row.onsuccess = function(event){
console.log("Deleted");
}
Delete all Objects
You can also wipe out all objects in a object store at once
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
var delete_all_rows = store.clear();
delete_all_rows.onsuccess = function(event){
console.log("Deleted all rows");
}
var store = write_transition.objectStore("qnimate_store");
var delete_all_rows = store.clear();
delete_all_rows.onsuccess = function(event){
console.log("Deleted all rows");
}
Update Object
You can also update property of a existing object in object store. To do this you simply add the same object again with same key. When key matches with an existing object its replaced.
var object1 = {name: "Narayan Prusty", age: "22", ID: "d3223", serialnumber: 1};
var object2 = {name: "QNimate Blog", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);
var object2 = {name: "QNimate Blog", age: "2", ID: "dasdasd121", serialnumber: 2};
var write_transition = db.transaction("qnimate_store", "readwrite");
var store = write_transition.objectStore("qnimate_store");
store.put(object1);
store.put(object2);
