IndexedDB Local Database

IndexedDB the local database in HTML5

This article is about the IndexedDB API which is a database locally on your computer. This API has been established as standard in applications made with HTML5. It has a number of advantages compared to traditional databases. For instance, some of them are that you do not have to connect to the server to return information, as a result the response is faster. On the other hand, it has more flexibility when storing data, since it is not governed by tables. In this example, we are going to learn how to create a local database on a web page. The user can store information, which in this case, will be books data such as the title, author, year that it was written and its ISBN. Once this data is stored, the user can also delete a book from this database if he so wishes.

First of all, we create a HTML document. This form will store the information that the user inputs about the books. On the left you see a screenshot of what you see in the browser.

create the indexeddb database

In addition, there is some javascript code. This code is responsible for the data storage.

Firstly, we declare the variable bd with global scope. This will allow us to use it inside and outside the functions.

Secondly, we put the window object to listen for the load event. As a result, once the page loads, that event is executed. Therefore the iniciar function is activated. This line of code is placed at the end.

window.addEventListener (‘load’, iniciar, false);

Next we declare the variables that correspond to the elements of the html document such as title, isbn, author, etc. The id value of each element is taken into account for its selection.

With indexedDB.open (´Books´, 2); We are creating the Books database and version 2. It is stored in the request variable.