IndexedDB Base de Datos local 2023

indexeddb api base de datos local html 5 creatuwebpymes blog
k

12/03/2023

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>
Formulario visto en navegador relacionado con la API IndexedDB

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

verificar palindromos con javascript | discover palindromes with javascript code

Palindromos con Javascript

Como hacer una calculadora con código python - Menu de Calculadora básica creada con código Python - Calculator Python code

Calculadora con Python

validar dni javascript en blog diseño páginas web - validate spainsh id using javascript

Validar ID con Javascript

dibujar triangulo con javascript codigo - how to draw triangle with JavaScript code

Triangulo con JavaScript

siteground_banner
Divi Cake is a community driven marketplace for Divi Child Themes, Builder Layouts, and Plugins - Shop Now!
       
creatuwebpymes quien somos

Francisco Brito Diaz

CEO de creatuwebpymes.com, empresa de diseño web y marketing digital en Canarias. 

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para fines de afiliación y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad