IndexedDB the local database in HTML5
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
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.
Add and Delete Data in IndexedDB
The agregar function is responsible for collecting the values that are inserted by the user and storing them in the DB.
The function borrarClave() is responsible for the deletion of the data of the DB of the key that the user indicates.