Using IndexedDb in HTML5 to Store Data Within the Browser

Introduction

Step 1

Step 2

Step 3

1. Defining and opening the database: The code below is used to define the database in the following application and opening the database to get ready to accept values from the browser. Write the following lines of code. In this code below we are opening a database called "mydb" and assigned it to IndexedDB variable "db".
   1. myidb.indexedDB.db = null;
   2. myidb.indexedDB.open = function() {
   3. var request = indexedDB.open("mydb");
   4. request.onsuccess = function(e) {
   5. myidb.indexedDB.db = e.target.result;
   6. };
   7. request.onfailure = myidb.indexedDB.onerror;
   8. };
2. Now Allowing the database to store objects: The object stores are created inside the "setversion" transaction hence it is a very important part. In the code below you will see how the setversion method is used and object stores can be created only in the setversion transaction and in the onsuccess. Also here we'll be some adding items. These following steps take place.

• The database is set open already
• An IDBRequest is executed and returned
• indexedDB.open method is called
• If the open request is successful onsuccess callback method is executed
• Database version is verified and If the version is mismatched then setversion is called and this is the only way to change the database structure.
• Here we can create or delete the object stores. The object stores are created by calling the "createObjectStore" method. The name and parameters are passed.
• The parameter passed in the object Store gives a unique identity to the object. Here "keypath " is used to define the unique property like the "timestamp" of the object.
  1. myidb.indexedDB.open = function() {
  2. var request = indexedDB.open("mydb",
  3. "Database defined");
  4. request.onsuccess = function(e) {
  5. var v = "1.0";
  6. myidb.indexedDB.db = e.target.result;
  7. var db = myidb.indexedDB.db;
  8. if(v!= db.version) {
  9. var setVrequest = db.setVersion(v);
  10. setVrequest.onfailure = myidb.indexedDB.onerror;
  11. setVrequest.onsuccess = function(e) {
  12. var store = db.createObjectStore("itemslist",
  13. {keyPath: "timeStamp"});
  14. myidb.indexedDB.getAllItemslistItems();
  15. };
  16. }
  17. myidb.indexedDB.getAllItemslistItems();
  18. };
  19. request.onfailure = myidb.indexedDB.onerror;
  20. }

• A method named "getItem" is defined which retrieves the items from the object-store.
• The READ_WRITE permission is granted
• The initial position of the item is received by IDBKeyRange.lowerBound(0) method.
• This initial position is used to retrieve Item form starting.
• If the request for retrieval is successful then the value is received otherwise control returns.
  1. myidb.indexedDB.getAllItemslistItems = function() {
  2. var mydb = document.getElementById("items");
  3. mydb.innerHTML = "";
  4. var db = myidb.indexedDB.db;
  5. var trans = db.transaction(["itemslist"], IDBTransaction.READ_WRITE, 0);
  6. var store = trans.objectStore("itemslist");
  7. // Get everything in the store;
  8. var keyRange = IDBKeyRange.lowerBound(0);
  9. var cursorRequest = store.openCursor(keyRange);
  10. cursorRequest.onsuccess = function(e) {
  11. var result = e.target.result;
  12. if(!!result == false)
  13. return;
  14. renderItemslist(result.value);
  15. result.continue();
  16. };
  17. cursorRequest.onerror = myidb.indexedDB.onerror;
  18. };

5. Rendering the Items: This is used to use the data in a manner easily readable by the user. Here a button for deleting the item is also created. see the code below:
   1. function renderItemslist(row) {
   2. var mydb = document.getElementById("items");
   3. var li = document.createElement("li");
   4. var a = document.createElement("a");
   5. var t = document.createTextNode();
   6. t.data = row.text;
   7. a.addEventListener("click", function(e) {
   8. myidb.indexedDB.deleteItemslist(row.text);
   9. });
   10. a.textContent = " [Delete]";
   11. li.appendChild(t);
   12. li.appendChild(a);
   13. mydb.appendChild(li)
   14. }
6. Now applying query for deleting the item from the Object store: This is a very simple way to remove the item from the Object store.