MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to IndexedDB a NoSQL Database

In this article, we will be learning about the IndexedDB. We will cover how to add and remove a database, how to get data from the database, and how to use cursors.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

IndexedDB is a NoSQL (mostly known as not only SQL) database. It is a type of robust storage mechanism which allows the user to store a large amount of data than the localStorage interface. Usually, these localStorage interfaces provides a space of not more than 5 MB. So, if the user wants to store more data, then definitely he/she has to go for an option other than localStorage.

Note: Presently, IndexedDB is used in Mozilla Firefox and Google Chrome.

IndexedDB follows the same-origin policy strictly as localStorage do. Because of this policy, a database created by one page cannot be accessed by pages on other hosts which help in providing a level of security for data.

IndexedDB has several advantages over SQLite too, which makes it better to use. Some of its advantages are as follows:

  • Firstly, the most important is its naive data storage format i.e., JavaScript Object which helps the users to avoid the condition of not mapping the JavaScript object into a SQL table structure.
  • Secondly, IndexedDB provides a set of interfaces to the users which help them to store JavaScript objects on a local disk.
  • Lastly, like all other JavaScript interface, it turns out to be very verbose.
Schematic of IndexedDB

Figure 1: Schematic of IndexedDB

Now, let us move on to the database structure. Before this, users must know that IndexedDB used object stores rather than tables and a lot of object stores can be located in a single database. A key is always associated with a value that is stored in an object store. It is entirely the decision of the object store whether to use key path or key generator. An object store can also build indices, but for the same, it must hold objects rather than primitives. Index performs the function of helping the user in order to check the values that are stored in an object store. Apart from this, indexes can also implement simple constraints on the stored data.

For better understanding of the users, let us take an example. Suppose, if we have an object store in where there is a set of people, and we want to make sure that no two people should have the same e-mail. So, in order to do this, we can use an index flag with the unique flag.

Listing 1: Shows the code for doing the above given example

//The employee data will be like this.
const employeeData = [
  { ssn: "11", name: "holly", email:"holly@home.org", age:23 },
  { ssn: "12", name: "nessy", email:"nessy@company.com", age:25}
];
const dbName = "the_name";
 
var request = indexedDB.open(dbName, 2);
 
request.onerror = function(event) {
  // This is done for handling errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;
 
   // Objectstore is created for holding information about our employees. For this, we're
  // going to use "ssn" as our defined key path because it's guaranteed to be
  // unique.
  var objectStore = db.createObjectStore("employees", { keyPath: "ssn" });

// Create an index to search employeess by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });
 
  // Create an index to search employees by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });
 
  
 
  // Store values in the newly created objectStore.
  for (var i in employeeData) {
    objectStore.add(employeeData[i]);
  }
};

Now, by giving a single call to createObjectStore(), we can create object stores. Now, let us discuss the above written code in which we are trying to create an object store which has a lot of people, but they all should have different e-mail address. Firstly, we have created an object store. This object store is named as “employee”. After this, we will be defining a property that will provide an individual identity to each employee. For our case, it will be “ssn or social security number”.

Note: "ssn" must be present on every object that is stored in the objectStore.

Apart from the ssn, we have also asked for an index named "name" that looks at the name property of the stored objects. As, the name of the two employees can be same. So we can’t use a unique index for this, whereas, two employees can’t have the same e-mail address. So, we have to define a unique index for this.

Now, the next step is to add and remove the data. Before doing anything, there is a need to start a transaction by the user. As we know, database object provides transactions; there are some specific points that need to be kept in mind by the user. They are as follows:

  • Firstly, the users need to specify the object stores in which they want the transactions to span.
  • Secondly, they need to decide that whether they want to make changes to the existing database or they are going to just read from it.
  • Finally, it is suggested that users should use read-only mode of transaction out the three modes. This is because of they are running concurrently.

Listing 2: Shows the code to add data to the database

var transaction = db.transaction(["employees"], "readwrite");
// Reminder: Precious experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
// In case the user wants to support such an implementation, they can just write: 
// var transaction = db.transaction(["employees"], IDBTransaction.READ_WRITE);

In the above code, transaction() functions plays an important role. It takes three arguments and at the same time returns a transaction object. Now, let us learn some basic points about transactions. Transactions are tied very closely to the event loop. If the user makes a transaction and then return to the event loop without using it, then the transaction will become inactive. In order to make the transaction active, the only available way is to make a request on it. As soon as the request is finished, user gets a DOM event and, if we are assuming that the request succeeded, so in that case users have another opportunity to extend the transaction during that callback. Transactions can receive DOM events of three different types: error, abort, and complete.

Listing 3: Shows the code to add the data to the object store provided by transaction

// When all the data is added to the database.
transaction.oncomplete = function(event) {
  alert("Everything's done!");
};
 
transaction.onerror = function(event) {
  // Make sure to handle the errors!
};
 
var objectStore = transaction.objectStore("employees");
for (var i in employeeData) {
  var request = objectStore.add(employeeData[i]);
  request.onsuccess = function(event) {
    // event.target.result == employeeData[i].ssn
  };
}

Note: Make sure that while using the add() function, no two objects that are already present in the database should have same key.

The next step is to remove data from the database. This is also done in a very similar manner.

Listing 4: Shows the code to remove the data from the database

var request = db.transaction(["employees"], "readwrite")
                .objectStore("employees")
                .delete("11");
request.onsuccess = function(event) {
  // It's gone!
};

Now, once the user is done with adding and removing data from the database, then he/she can fetch data from the database. There are two methods to do this. The codes for both methods are as follows:

Listing 5: Shows the code for “simple” retrieval (Method – 1)

var transaction = db.transaction(["employees"]);
var objectStore = transaction.objectStore("employees");
var request = objectStore.get("11");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Do something with the request.result!
  alert("Name for SSN 11 is " + request.result.name);
};

Listing 6: Shows the code for fetching (Method – 2)

db.transaction("employees").objectStore("employees").get("11").onsuccess = function(event) {
  alert("Name for SSN 11 is " + event.target.result.name);
};

Note: In the method – 2, the users must handle errors at the database level.

Now, we will learn about using cursors. Users can use a cursor when they want to step through all the values in their object store.

Listing 7: Shows the code to use a cursor

var objectStore = db.transaction("employees").objectStore("employees");
 
objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    alert(" There are no more such entries!");
  }
};

In the above code, we have used a function called opencursor() which can take several arguments. They are as follows:

  • Firstly, users can limit the range of items that are retrieved by using a key range object.
  • Secondly, users can specify the iteration direction. For understanding of the users, in the above example, iteration is done in ascending order over all the values.

Conclusion

Finally, in this article, we have learnt IndexedDB, which has become a most component in all the browsing softwares now-a-days.

Hope you like reading it!



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login