HTML - IndexedDB
HTML - IndexedDB
The indexedDB is a new HTML5 concept to store the data inside user’s browser. It is more powerful than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster.
Why to use indexedDB?
The W3C has announced that the Web SQL database is a deprecated local storage specification so web developer should not use this technology any more. The indexedDB is an alternative for web SQL data base and more effective than older technologies.
Features
- It stores key-pair values
It stores key-pair values
- It is not a relational database
It is not a relational database
- IndexedDB API is mostly asynchronous
IndexedDB API is mostly asynchronous
- It is not a structured query language
It is not a structured query language
- It allows to access the data from same domain
It allows to access the data from same domain
IndexedDB
Before enter into an indexedDB, we need to add some prefixes of implementation as shown below −
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
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}Open an IndexedDB database
Before creating a database, we have to prepare some data for the data base.let’s start with company employee details.
const employeeData = [
{ id: "01", name: "Gopal K Varma", age: 35, email: "contact@codescompiler.com" },
{ id: "02", name: "Prasad", age: 24, email: "prasad@codescompiler.com" }
];Adding the data
Here adding some data manually into the data as shown below −
function add() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "01", name: "prasad", age: 24, email: "prasad@codescompiler.com" });
request.onsuccess = function(event) {
alert("Prasad has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add data\r\nPrasad is already exist in your database! ");
}
}Retrieving Data
We can retrieve the data from the data base using with get()
function read() {
var transaction = db.transaction(["employee"]);
var objectStore = transaction.objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
alert("Unable to retrieve daa from database!");
};
request.onsuccess = function(event) {
if(request.result) {
alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
} else {
alert("Kenny couldn't be found in your database!");
}
};
}Using with get() , we can store the data in object instead of that we can store the data in cursor and we can retrieve the data from cursor
function readAll() {
var objectStore = db.transaction("employee").objectStore("employee");
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
cursor.continue();
} else {
alert("No more entries!");
}
};
}Removing the data
We can remove the data from IndexedDB with using the remove() method. Here is how the code looks like −
function remove() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("02");
request.onsuccess = function(event) {
alert("prasad entry has been removed from your database.");
};
}HTML Code
To show all the data we need to use onClick event as shown below code −
The final code should be as −