Using IndexedDB For Client-Side Storage

Imagine developing a web app that functions both online and offline. Imagine how happy your users would be knowing they still have access to their data without the Internet. IndexedDB provides a way for you to persistently store data inside a user’s browser, regardless of network availability.

What is IndexedDB?

IndexedDB is a large-scale, NoSQL storage system that stores collections of JavaScript Object Notation (JSON) objects.

According to Mozilla Developer Network (MDN), “IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.”

JSON Object Syntax Features

1. JSON objects are surrounded by curly braces {}.
2. JSON objects are written in key/value pairs.
3. Keys must be strings.
4. Keys and values are separated by a colon.
5. Each key/value pair is separated by a comma.

Example: {“name”: “firstname”, “Age”:10, “country”:”Ghana”}

IndexedDB terms

1. Database – The database contains the object stores, which contain the data you would like to persist.
2. Object Store – The object store is basically a bucket that contains the data. In relation to traditional relational databases, object stores can be considered the tables in the database.
3. Index – An index is a structure for organizing data in an object store by a specific property. An index makes it easier and faster to retrieve data by that specific attribute.
4. Operation – An interaction with the database
5. Transaction – A transaction is a unit consisting of an operation, or multiple operations, that ensures database integrity. All operations in IndexedDB must be part of a transaction. If any of the actions within a transaction fail, none are applied and the database is returned to its previous consistent state.
7. Cursor – A mechanism for iterating through all the records.

Pros of IndexedDB

1. IndexedDB provides good search performance due to indexes.
2. Browser support: Chrome, Firefox, IE10, mobile FF, IOS Safari.
3. IndexedDB is an asynchronous API; therefore, it generally has good performance.
4. IndexedDB can handle complex data.

Cons of IndexedDB

1. A somewhat complex API.

IndexedDB is not supported by all browsers, so you may check if it’s supported by your browser by using this simple if statement:

//Checking for IndexedDB support
if (!window.indexedDB) {
    console.log("Your browser does not support IndexedDB");
}else{
	console.log("Your browser supports IndexedDB")
}

You may create multiple databases with different names. However, there is typically one database per application.

//Opening a Database
function openDb(){
	// Open the database
	//parameters - database name and version number. - integer
	var db
	var request = indexedDB.open("Database", 4);
	db = this.result

	//Generating handlers
	//Error handlers
	request.onerror = function(event) {
		console.log("Error: ")
	};

	//OnSuccess Handler
	request.onsuccess = function(event) {
   		console.log("Success: ")
   		db = event.target.result
 	};
  	
  	//OnUpgradeNeeded Handler
	request.onupgradeneeded = function(event) { 
		console.log("On Upgrade Needed")
  		 
  		db = event.target.result;

  		// Create an objectStore for this database
  		//Provide the ObjectStore name and provide the keyPath which acts as a primary key
  		var objectStore = db.createObjectStore("ObjectStoreName", {keyPath: 'id', autoIncrement: true });
	};
}

In order to perform transactions, you first need to get the object store. Consequently, you may perform any add, delete or read operations. This function will return the object store.

//Simple function to get the ObjectStore
//Provide the ObjectStore name and the mode ('readwrite')
function getObjectStore(store_name, mode) {
	var tx = db.transaction(store_name, mode);
	return tx.objectStore(store_name);
  }

A method to add a JSON object to the database and store it in the object store we created earlier follows. You can create an object with key value pairs, get the object store and call the add() method to add the object to the object store. Consequently, you can create two handlers: on success and on error.

//Adding to the Database
function addPerson(store_name) {
	var obj = { fname:"Test", lname: "Test", age: 30, email: "[email protected]" };

	var store = getObjectStore(store_name, 'readwrite');
	var req;
	try {
		req = store.add(obj);
	} catch (e) {
		throw e;
	}
	req.onsuccess = function (evt) {
		alert("Insertion in DB successful");
	};
	req.onerror = function() {
		alert("Insertion in DB Failed ", this.error);
	};
}

The following is a method to clear all the data in the object store. The first thing you would do is get the object store and call the clear() method to clear its content. Consequently, generate two handlers.

function clearObjectStore(store_name) {
  	//Get the ObjectStore
  	var store = getObjectStore(store_name, 'readwrite');
  	//Clear the ObjectStore
  	var req = store.clear();
  	//Success Handler
  	req.onsuccess = function(event) {
  		alert("clear successful")
  	};
  	//Error Handler
  	req.onerror = function (event) {
  		alert("clear failed")
  	};
  }

Next we make use of the cursor to read all the data in the object store. First, you get the object store and call the openCursor() method on the object store that may iterate through it and allow you to push each object instance into an array for further manipulation.

//Read All data in ObjectStore
function readAll(store_name){
        	//Create an array
        	var peopleArray = [];
        	//Get the ObjectStore
        	objectStore = getObjectStore(store_name, 'readwrite')
 
        	//Open the Cursor on the ObjectStore
        	objectStore.openCursor().onsuccess = function(event) {
                    	var cursor = event.target.result;
                    	//If there is a next item, add it to the array
                    	if (cursor) {
	                	peopleArray.push(cursor.value);
	                	alert(cursor.value)
	                	cursor.continue();
                    	}
                    	//else get an alert informing you that it is done
                    	else {
	                	alert("All done:");
                    	}
        	};
}

I hope implementing all the code shown above will provide you with the basic operations you need to push on and develop great web apps with offline functionalities.

For more information on using IndexedDB, you may reference:
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB