IndexedDB la base de datos local en HTML5
Este artículo es acerca de la API IndexedDB que se trata de una base de datos a nivel local en tu ordenador. Esta API se ha establecido como estándar en las aplicaciones hechas con HTML5.
Tiene una serie de ventajas con respecto a a las BBDD tradicionales. Alguna de ellas es que no tiene que conectar con el servidor para devolver información, con lo que la respuesta es más rápida. Por otro lado, tiene más flexibilidad a la hora de almacenar datos, al no regirse por tablas.
Veamos un ejemplo donde crearemos una base de datos a nivel local en una página web. El usuario podrá insertar libros con los parámetros siguientes: título, autor, año e ISBN. Una vez esos datos sean almacenados, este podrá borrar un libro de dicha BBDD si así lo desea.
En primer lugar crearemos un documento HTML, al que añadiremos este formulario en el body de dicho documento HTML. El código completo se encuentra abajo y no contiene estilos css. Esto es lo que se verá en el navegador.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejercicio 6 Modulo indexedDB</title>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<script type="text/javascript" src="index++.js"></script>
</head>
<body>
<div id="contenedor">
<form id="formulario" name="formulario" method="post" action="">
<h2>Ejercicio 6 indexedDB</h2>
<table>
<tr>
<td>Titulo</td>
<td><input type="text" name="titulo" id="titulo"></td>
</tr>
<tr>
<td>ISBN</td>
<td><input type="text" name="isbn" id="isbn"></td>
</tr>
<tr>
<td>Autor</td>
<td><input type="text" name="autor" id="autor"></td>
</tr>
<tr>
<td>Año</td>
<td><input type="text" name="ano" id="ano"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="boton" id="boton" value='Enviar'>
</tr>
</table>
</form>
<br>
<br>
<label>Titulo:</label>
<input type="text" name="deleteClave" id="deleteClave">
<input type="submit" name="delete" id='delete' value="Borrar"></td>
</div>
</body>
</html>
Crear la Base de Datos en IndexedDB
Hemos unido código javascript al documento HTML arriba mencionado. Este código javascript será el responsable de crear la base de datos local y del almacenamiento de datos en el navegador.
Por lo tanto lo primero que haremos es declarar la variable bd con ámbito global. Esto nos permitirá utilizarla dentro y fuera de las funciones que iremos viendo a continuación.
Pondremos el objeto window a la escucha del evento load. Dicho evento ´load´ será ejecutado una vez la página haya sido cargada por el navegador. Una vez que esto se ha producido, la función iniciar se activa. Esta línea de código se coloca al final del documento javascript.
window.addEventListener(‘load’, iniciar, false)
Seguidamente declaramos las variables que se corresponden con los elementos del documento html como titulo, isbn, autor, etc. Se tiene en cuenta el valor id de cada elemento para su selección.
Con indexedDB.open(´Books´, 2) ; estamos creando la base de datos Books y en la versión 2. Esta se almacena en la variable request.
JS
//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('deusto', 2);
request.onsuccess = function(e){
bd = e.target.result;
}
request.onupgradeneeded = function(e){
bd = e.target.result;
bd.createObjectStore('libros', {keyPath: 'titulo'});
}
}
Agregar y Borrar Datos en IndexedDB
La función agregar se encarga de recoger los valores que se insertan por parte del usuario y almacenarlos en la BBDD.
JS
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;
}
La función borrarClave() es la responsable de la eliminación de los datos de la BBDD de la clave que el usuario designe.
JS
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);
Este artículo está hecho para estudiantes de programación y donde uno de sus ejercicios es el uso de indexeddb como base de datos local.
En definitiva, hay muchos más artículos y tutoriales en la web que hablan acerca de indexeddb base de datos.
Para aquellos que quieran aprender más sobre indexeddb pueden seguir el enlace que habla de manera específica de esta API de HTML
Creatuwebpymes, es una empresa de Diseño y programación de páginas web en Canarias que ❤️ la programación.
Otras entradas al Blog
Palindromos con Javascript
Calculadora con Python
Validar ID con Javascript
