Welcome Guest! (App Version 3.1)

websitnero logo name

Indexed DB

Using Indexed DB in HTML5

Indexed DB is a feature by which you can make a small database on the browser or client-side computer. As in general, the databases are maintained on the backend server, this feature is a path breaking one. However, it is not purposeful for a large scale application. The purpose of Indexed DB is to maintain a small database on the browser for a small period of time till some intermediate work of entering data is in progress. When all the work is finished then data needs to be pushed to the backend (ie, when the process or calculations are complete). This is a very useful feature for reducing multiple hits to the database or backend throughout the user interaction and dumping data only once when all the work is completed. This reduces the hits on the backend and makes user interactions rapid and fair-paced.

Example

<body>

<button onclick="read()">Read </button>
<button onclick="readAll()">Read all </button>
<button onclick="add()">Add data </button>
<button onclick="remove()">Delete data </button>

<script type="text/javascript">

//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
       
//prefixes of window.IDB objects
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.")
}
       
const employeeData = [
  { id: "1", name: "Jane", age: 35 },
  { id: "2", name: "Victor", age: 32 }
 ];

var db;

//Request to open new Database 
var request = window.indexedDB.open("Database1", 1);

//result on success
request.onsuccess = function(event) {
  db = request.result;
  console.log("success: "+ db);
};
       
//result on error
request.onerror = function(event) {
  console.log("error: ");
};
         
//To run after success of DB Creation
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("Database1", {keyPath: "id"});
          
  for (var i in employeeData) {
    objectStore.add(employeeData[i]);
  }
}
         
//Add data to IndexDB
function add() {
  var request = db.transaction(["Database1"], "readwrite")
  .objectStore("Database1")
  .add({id:"3", name: "Peter", age: 49});
          
  request.onsuccess = function(event) {
    alert("Record has been added in your database.");
  };
          
  request.onerror = function(event) {
    alert("Unable to add as this data already present in your Database! ");
  }
}
         
//Remove data from IndexDB
function remove() {
  var request = db.transaction(["Database1"], "readwrite").objectStore("Database1").delete("3");
          
  request.onsuccess = function(event) {
    alert("Record has been deleted from Database");
  };

  request.onerror = function(event){
    alert("There has been some issue while deleting data!");
  }
}

//Read data from IndexDB
function read() {
  var transaction = db.transaction(["Database1"]);
  var objectStore = transaction.objectStore("Database1");
  var request = objectStore.get("3");
          
  request.onsuccess = function(event) {
    if(request.result) {
      alert("Name: " + request.result.name + ", Age: " + request.result.age);
    }               
    else {
      alert("Record not found in your Database!");
    }
  };
          
  request.onerror = function(event) {
    alert("Unable to retrieve data from database for this query!");
  };
}
         
//Read All data from Indexed DB
function readAll() {

  var objectStore = db.transaction("Database1").objectStore("Database1");
          
  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
           
    if (cursor) {
      alert("Name is " + cursor.value.name + ", and Age is: " + cursor.value.age);
      cursor.continue();
    }
           
    else {
      alert("No more entries in the Database!");
    }
  };

  objectStore.openCursor().onerror = function(){
    alert("There is no data in the Database!");
  }

}

</script>

</body>

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.