{"id":756,"date":"2014-11-26T00:00:24","date_gmt":"2014-11-25T18:30:24","guid":{"rendered":"http:\/\/codeforgeek.com\/?p=756"},"modified":"2021-06-20T06:05:58","modified_gmt":"2021-06-20T00:35:58","slug":"indexeddb-tutorial","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/indexeddb-tutorial\/","title":{"rendered":"IndexedDB : Database in browser"},"content":{"rendered":"

IndexedDB is a JavaScript-based object-oriented database. It provides key -value data management within browser. IndexedDB Api\u00a0wraps the SQL like features to perform CRUD operation.<\/p>\n

In this tutorial i am going to explain basics about IndexedDB<\/strong> Api with sample code.<\/p>\n

Sample code to get started :<\/h2>\n

Look over the code below, and observe the output which it generates.
\n
\nvar request = indexedDB.open(\"synker\");
\nvar db;
\nrequest.onupgradeneeded = function() {
\n\/\/ The database did not previously exist, so create object stores and indexes.
\ndb = request.result;
\nvar store = db.createObjectStore(\"notes\", {keyPath: \"ID\"});
\nvar ourindex = store.createIndex(\"content\",\"user_content\");
\n};<\/p>\n

request.onsuccess = function() {
\ndb = request.result;
\n};
\n<\/code><\/p>\n

For testing purpose, open up the chrome developer console and paste the code in “console” section. It will execute and generate the Index DB in your browser. See screenshot below for reference.
\n

\"Execute<\/a>
Execute code from Developer console.<\/figcaption><\/figure>
\nOnce you executed the code, go to Resources<\/strong> tab then IndexedDB<\/strong> and see the name “synker”<\/strong> in it.
\n
\"IndexedDB<\/a>
IndexedDB created.<\/figcaption><\/figure>
\nThis was just to get you started !<\/p>\n

Explanation :<\/h3>\n

Above code creates Index database name as “synker”<\/strong>. In index database, you must create objectStore<\/strong> to store your information. We create one for us named “notes”<\/strong>. Now inside “notes”<\/strong> we can create our index and which in turn store our information.<\/p>\n

Insert operation in indexeDB:<\/h3>\n

To put some information in our index database you need to create “transaction”<\/strong> object which will points to your objectStore<\/strong>. Here is sample code.
\n
\nfunction addData(data){<\/p>\n

var tx = db.transaction(\"notes\", \"readwrite\");
\nvar store = tx.objectStore(\"notes\");<\/p>\n

store.put({content: data, ID:1});
\n}
\n<\/code>
\nOutput:<\/strong>
\n\"Screenshot<\/a><\/p>\n

Select operation in IndexedDB: <\/h3>\n

To perform SELECT operation you need to create transaction object which points to your ObjectStore. Then you have to assign a “cursor”<\/strong> which will loop through the information in your ObjectStore, you just have to write a logic to store it in any data type. Here is sample code.
\n
\nfunction getalldata()
\n{
\n var all_content;
\n var self=this;
\n var tx = db.transaction(\"notes\", \"readonly\");
\n var store = tx.objectStore(\"notes\");<\/p>\n

var request = store.openCursor();
\n request.onsuccess = function() {
\n var cursor = request.result;
\n if (cursor) {
\n self.all_content=cursor.value.content;
\n cursor.continue();
\n }
\n };
\n return self.all_content;
\n}
\n<\/code>
\nOutput:<\/strong>
\n\"Screenshot<\/a><\/p>\n

Delete operation in IndexedDB: <\/h3>\n

You can delete particular index or some part of data which matches using deleteindex<\/strong> and delete<\/strong> methods. <\/p>\n

Update operation in IndexedDB:<\/h3>\n

To update the information in particular you can use same PUT function which we have used to insert data, if that data exists already then it will update it else add it as new value. <\/p>\n

Conclusion:<\/h3>\n

IndexedDB is very useful for developing structure web application where we need to store information on client end. You can also assign auto generated key for managing index as well as do almost every simple transnational operation using IndexedDB.<\/p>\n

Further reading:<\/h3>\n