Download to read offline
![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. Adding the data Here adding some data manually into the data as shown below - const employeeData name: "Gopal K Varma", age: 35, { id : "02", name : "Prasad", age: 24, email:email: "contact@texamine.com" 'prasadtexamine.com" } function add var request db. transaction( ["employee"], "readwrite") objectStore( " employee " ) Id name: "prasad" , age: 24, email: " prasad@texamine . com" request . onsuccess function(event) { alert ("Prasad has been added to your database. request . onerror function (event) { alert ("Unable to add datarnPrasad is already exist in your database!](https://image.slidesharecdn.com/htmlindexeddb-210421102120/75/Html-indexed-db-4-2048.jpg)
![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! ")](https://image.slidesharecdn.com/htmlindexeddb-210421102120/75/Html-indexed-db-5-2048.jpg)
![Removing the data We can remove the data from IndexedDB with remove().Here is how the code looks like function remove() { var request db. transaction ( [ "employee" ] , " readwrite" ) objectStore delete( "02 " ) ; request . onsuccess function(event) { alert ("prasad entry has been removed from your database.](https://image.slidesharecdn.com/htmlindexeddb-210421102120/75/Html-indexed-db-7-2048.jpg)
![The final code should be as - <!doctype html> <html> <head> <script type= "text/javascript"> const employeeData { id : "00-01", name: " gopal " , age : 35, email : " gopal@tutorialspoint . com" { id : "00-02", name: 'prasad", age : 32, email: 'prasad@tutorialspoint . com' var db; var request = window. indexedDB.open("newDatabase", 1) request . onerror function(event) { console. log( "error: if ( !window. indexedDB) { window. alert ("Your browser doesn 't support a request . onsuccess function(event) { db request . result; console. log( " success : "+ db);,", request . onupgradeneeded function (event var db event . target . result; var objectStore db . createObjectStore( "employee " , keyPath for (var i in employeeData) { objectStore . add (employeeData [i] ) ; function read() { var transaction db . transaction( [ "employee" ] ) ; var objectStore transaction . objectStore( " employee" ) ; var request objectStore . get( "00-03 " ) ;](https://image.slidesharecdn.com/htmlindexeddb-210421102120/75/Html-indexed-db-9-2048.jpg)
![request.onerror = function(event) { alert ("Unable to retrieve daa from database! request . onsuccess function(event) { if(request. result) { alert ( "Name: 11 + request. result. name + 11 Age : + request. result. age + Email : request. result . email } else alert ("Kenny couldn't be found in your database! ") ; function readA11 var objectStore db . transaction ( "employee" ) . obj ectStore( "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! " ) ; function add var request db. transaction ( [ "employee" ] " readwrite" ) objectStore( " employee " ) ({ d. "00-03" , name : "Kenny" , age: 19, email: "kenny@planet.org" request . onsuccess function(event) { alert ("Kenny has been added to your database. " ) ; request . onerror function (event) { alert ("Unable to add datarnKenny is aready exist in your database! function remove() { var request db . transaction " readwrite" ) objectStore( " employee " )](https://image.slidesharecdn.com/htmlindexeddb-210421102120/75/Html-indexed-db-10-2048.jpg)
Html indexed db
- 1.
- 2. What is Indexeddb? The indexeddb is a new HTML5 concept to store the data inside user's browser. indexeddb is more power 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. indexeddb is an alternative for web SQL data base and more effective than older technologies.
- 3. Features :- itstores key-pair values it is not a relational database IndexedDB API is mostly asynchronous it is not a structured query language it has supported 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 I I window.mozIndexedDB window. webkitIndexedDB window. msIndexedDB; window. IDBTransaction = window. IDBTransaction window. webkitIDBTransaction window. msIDBTransaction; window.IDBKeyRange = window. IDBKeyRange I I window. webkitIDBKeyRange window. msIDBKeyRange if ( l. window. indexedDB) { window. alert("Your browser doesn't support a stable version of IndexedDB.
- 4. Open an IndexedDBdatabase Before creating a database, we have to prepare some data for the data base. let's start with company employee details. Adding the data Here adding some data manually into the data as shown below - const employeeData name: "Gopal K Varma", age: 35, { id : "02", name : "Prasad", age: 24, email:email: "contact@texamine.com" 'prasadtexamine.com" } function add var request db. transaction( ["employee"], "readwrite") objectStore( " employee " ) Id name: "prasad" , age: 24, email: " prasad@texamine . com" request . onsuccess function(event) { alert ("Prasad has been added to your database. request . onerror function (event) { alert ("Unable to add datarnPrasad is already exist in your database!
- 5. Retrieving Data We canretrieve 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! ")
- 6. 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 readA11() { 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 : 11 cursor. value. age 1 1 Email: 11 + cursor. value. email); cursor.continue() else alert("No more entries!
- 7. Removing the data Wecan remove the data from IndexedDB with remove().Here is how the code looks like function remove() { var request db. transaction ( [ "employee" ] , " readwrite" ) objectStore delete( "02 " ) ; request . onsuccess function(event) { alert ("prasad entry has been removed from your database.
- 8. HTML Code To showall the data we need to use onClick event as shown below code - < ! DOCTYPE html> <html> <head> </head> <body> <button onclick="read()">read</button> <button onclick="readAll()">readAll</button> <button onclick="add()">add</button> <button onclick="remove()">remove</button> </body> </html>
- 9. The final codeshould be as - <!doctype html> <html> <head> <script type= "text/javascript"> const employeeData { id : "00-01", name: " gopal " , age : 35, email : " gopal@tutorialspoint . com" { id : "00-02", name: 'prasad", age : 32, email: 'prasad@tutorialspoint . com' var db; var request = window. indexedDB.open("newDatabase", 1) request . onerror function(event) { console. log( "error: if ( !window. indexedDB) { window. alert ("Your browser doesn 't support a request . onsuccess function(event) { db request . result; console. log( " success : "+ db);,", request . onupgradeneeded function (event var db event . target . result; var objectStore db . createObjectStore( "employee " , keyPath for (var i in employeeData) { objectStore . add (employeeData [i] ) ; function read() { var transaction db . transaction( [ "employee" ] ) ; var objectStore transaction . objectStore( " employee" ) ; var request objectStore . get( "00-03 " ) ;
- 10. request.onerror = function(event){ alert ("Unable to retrieve daa from database! request . onsuccess function(event) { if(request. result) { alert ( "Name: 11 + request. result. name + 11 Age : + request. result. age + Email : request. result . email } else alert ("Kenny couldn't be found in your database! ") ; function readA11 var objectStore db . transaction ( "employee" ) . obj ectStore( "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! " ) ; function add var request db. transaction ( [ "employee" ] " readwrite" ) objectStore( " employee " ) ({ d. "00-03" , name : "Kenny" , age: 19, email: "kenny@planet.org" request . onsuccess function(event) { alert ("Kenny has been added to your database. " ) ; request . onerror function (event) { alert ("Unable to add datarnKenny is aready exist in your database! function remove() { var request db . transaction " readwrite" ) objectStore( " employee " )
- 11. request . onsuccessfunction(event) { alert ("Kenny' s entry has been removed from your database. < / script > </head> <body> <button onclick=“ read() ">Read < / button> <button onclick=“ readA11 >Read all </button> <button onclick =“add()">Add data < / button> <button onclick=“ remove()” >De1ete data </button> </html> It will produce the following output - Read ReadAll Add Delete