IndexedDB the local database in 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
//declaracion de la variable bd
var bd;
function iniciar(){
var titulo = document.getElementById('titulo');
var isbn = document.getElementById('isbn');
var autor = document.getElementById('autor');
var ano = document.getElementById('ano');
var boton = document.getElementById('boton');
var borrar = document.getElementById('delete');
boton.addEventListener('click', agregar, false);
borrar.addEventListener('click', borrarClave, false);
var request = indexedDB.open('Books', 2);
request.onsuccess = function(e){
bd = e.target.result;
}
request.onupgradeneeded = function(e){
bd = e.target.result;
bd.createObjectStore('libros', {keyPath: 'titulo'});
}
}
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.
Add and Delete Data in IndexedDB
function agregar(){
var titulo = document.getElementById('titulo').value;
var isbn = document.getElementById('isbn').value;
var autor = document.getElementById('autor').value;
var ano = document.getElementById('ano').value;
var libro = {titulo: titulo, isbn: isbn, autor: autor, ano: ano};
var customerObjecstore = bd.transaction('libros', 'readwrite').objectStore('libros');
customerObjecstore.add(libro);
alert ('Registro guardado con exito en la base de datos');
return false;
}
The agregar function is responsible for collecting the values that are inserted by the user and storing them in the DB.
function borrarClave(){
var borrar = document.getElementById('deleteClave').value;
var customerObjecstore = bd.transaction('libros', 'readwrite').objectStore('libros');
var registro= customerObjecstore.delete(borrar);
registro.onsuccess = function(e){
alert('Registro borrado de la base de datos exitosamente');
return false;
}
}
window.addEventListener('load', iniciar, false);
The function borrarClave() is responsible for the deletion of the data of the DB of the key that the user indicates.
