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.

Formulario visto en navegador relacionado con la API IndexedDB

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

<script>
//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'});
	}
}

//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;
}

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);
</script>

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);

</script>

The function borrarClave() is responsible for the deletion of the data of the DB of the key that the user indicates.

We are a web desin company based in Canarias. This post is an HTML exercise that the students usually encounter in their proyects.

IndexedDB Local Database

IndexedDB the local database in HTML5

create the indexeddb database

Add and Delete Data in IndexedDB

Submit a Comment Cancel reply

Recent Posts

Categories

Creatuwebpymes

Servicios

Services

Blog | Ultimos Posts

Blog | Latest Posts

Contacto