IndexedDB

[edsanimate_start entry_animation_type= “flipInX” entry_delay= “1” entry_duration= “2” entry_timing= “ease-in” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “”]

The IndexedDB(Indexed database) API represents the transactional web storage for javaScript object oriented database (JSON).

The IndexedDB API is used in client side storage for structured data and files.

The IndexedDB is used for local storage for data and is used for applications with larger data.

The IndexedDB is an alternative method for Web SQL database and other older technologies.

This API stores key/pair values.

Sample code for IndexedDB

Before open a database some prefixes have to be added 

window.indexedDB = window.indexedDB || window.mozindexedDB || window.webkitindexedDB || window.msindexedDB;

window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

Adding data 

function add()

{

var request = db.transaction([“members”], “readwrite”)

.objectStore(“members”)

.add({id: “01”, name: “USA”  });

request.onsuccess = function(event) {

alert(“USA has been added to your database.”);

};

request.onerror = function(event) {

alert(“Unable to add data in your database! “);

}

}

Retrieve data using get()

function read()

{

var transaction = db.transaction([members]);

var objectStore = transaction.objectStore([memebers]);

var request = objectStore.get(“00-03”);

request.onerror = function(event) {

alert(“Unable to retrieve data in your database! “);

};

request.onsuccess = function(event) {

alert(“Removed data from your database! “);

if(request.result) {

alert(“Team: ” + request.result.name);

}

else {

alert(“No data”);

}

};

}

Remove data

function remove()

{

var request = db.transaction([“members”], “readwrite”)

.objectStore(“members”)

.delete(“01”);

request.onsuccess = function(event) {

alert(“Removed data from your database! “);

};

}

Sample code

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”Content-Type” content=”text/html”>

<title>IndexedDB</title>

</head>

<body>

<button onclick=”read()”>Read data</button>

<button onclick=”add()”>Add data</button>

<button onclick=”remove()”>Delete data</button>

</body>

</html> 

 

[edsanimate_end]