Como siempre que tengo ocasión comento, HTML5 es uno de los grandes avances en la programación web, repleto de nuevas funcionalidades simplemente maravillosas. Y entre las infinitas perlas de HTML5, encontramos la de poder explotar una base de datos local.
El tema que se va a tratar en este artículo es complejo y largo, por lo que su contenido se va a dividir en varios artículos diferentes (unos cinco) de forma que al terminar esta serie de artículos, puedas trabajar perfectamente con IndexedDB.
Como ya es habitual, aquí está la versión en vídeo del artículo por si prefieres ver/escuchar a leer:
Hace algún tiempo ya, publiqué un artículo sobre LocalStorage y cómo esta nueva funcionalidad acabará desbancando a las toda-poderosas cookies.
Aunque LocalStorage nos abre un mundo nuevo de posibilidades, no deja de tener ciertas limitaciones como el espacio (normalmente unos 10MB en total) o la imposibilidad de hacer búsquedas… y aquí entra en juego IndexedDB. Pero antes de hablar de IndexedDB debemos ponernos un poco en situación.
Cuando hablamos de base de datos, nos vienen a la mente las bases de datos relacionales y en el SQL. En la elaboración del estándar HTML5 este detalle se tuvo en cuenta con el WebSQL. WebSQL era una de las novedades más increíbles de HTML5, puesto que permitía atacar una base de datos SQLite con la API de Javascript que HTML5 nos proporcionaba para ello…
WebSQL nos habría una puerta brutal hacia la profesionalización de las aplicaciones web y móviles basadas en HTML5… no hay que ponerse a imaginar mucho para ver la belleza de poder ejecutar cualquier sentencia SQL a través de Javascript para explotar una base de datos local, accesible sólo desde esa página… una base de datos ACID… con su integridad referencial, etc etc… todo un mundo de posibilidades para que nuestra aplicación trabajase offline y sólo enviase la información en el momento de sincronizarse con un servidor remoto… en otras palabras: Se hacía realidad tener aplicaciones en HTML5 100% del lado del cliente.
Y así estábamos todos viviendo en un mundo maravilloso… hasta que llegó la W3C y de un sopapo nos trajo de vuelta a la realidad: WebSQL se desechaba y quedaba fuera del estándar. Menudo bajón…
Eso sí, la W3C nos dio una de cal y otra de arena, porque dejaba fuera WebSQL, pero confirmaba y nos animaba a todos a pasarnos a IndexedDB como la solución final para tener nuestra base de datos local. De hecho, la documentación oficial de IndexedDB es de las más completitas que he visto en la W3C.
Así pues… ¿IndexedDB?
Qué es IndexedDB
Como podrás suponer, IndexedDB es la herramienta que HTML5 proporciona a los programadores para poder trabajar con una base de datos desde la propia aplicación web, sin tener que conectarnos a ningún servidor… disponible offline (en entornos sin conexión web) y persistente (al cerrar la aplicación, el contenido no se borra).
Algunas características de IndexedDB
Como algunas de las bondades de IndexedDB podemos destacar las siguientes:
- Es un sistema de almacenamiento local: Es una característica muy útil; pensemos en una aplicación móvil hecha en HTML5… o en una extensión de Chrome, Firefox, etc. Si IndexedDB no fuera un sistema de almacenamiento local no podríamos acceder al contenido almacenado si nuestra conexión de red estuviese caída. Gracias a que la información almacenada en IndexedDB está en el propio equipo, nuestra aplicación puede seguir funcionando perfectamente aunque estemos sin conexión.
- No tiene límite de tamaño: Es una de sus grandes bondades. Al usar LocalStorage, tenemos un límite de almacenamiento establecido por el navegador… límite que suele rondar los 10MB. Si bien es suficiente para gran parte de los casos, este límite puede suponer un problema si nuestra aplicación mueve mucho dato. En el caso de IndexedDB este límite no existe y estamos hablando de un sistema de almacenamiento ilimitado (bueno, limitado por tu disco duro claro). Eso sí, en el caso de Firefox, aunque el espacio sea ilimitado, el navegador pre-reserva 50MB de espacio y te solicita permiso cuando necesita reservar otros 50MB.
- Permite múltiples «tablas»: Bueno, IndexedDB no funciona con tablas, pero en este punto del artículo y para que nos entendamos, puedes tener en una misma base de datos varias tablas para almacenar tu contenidos.
- Permite múltiples bases de datos: No estás limitado a una base de datos, puedes conectarte a varias bases de datos vía IndexedDB.
Cómo funciona IndexedDB
Antes de entrar en materia, expliquemos un poco el funcionamiento de IndexedDB.
IndexedDB no es una base de datos propiamente dicha, por lo que no tendremos tablas, ni estructuras de datos al estilo SQL… IndexedDB es más bien una serie de colecciones de objetos.
Por un lado, tenemos un mega-contenedor, que sería lo que habitualmente conocemos como base de datos:
1 mega-contenedor == 1 base de datos.
Por supuesto, podemos tener varios mega-contenedores.
Dentro de nuestro contenedor, no tenemos tablas… lo que tenemos son colecciones de objetos:
1 colección == 1 tabla
Por supuesto, podemos tener varias colecciones en cada base de datos.
Al estar hablando de colecciones de objetos… el contenido de nuestras tablas no serán tuplas sino que serán objetos.
Esto puede resultar un poco extraño… pero está realmente bien hecho, de forma que podemos establecer llaves únicas, primarias, hacer búsquedas… incluso joins (aunque algo más rudimentarios).
Bueno! Basta ya de charla… empecemos con el código!!
Creando nuestra base de datos IndexedDB
Con IndexedDB, estamos hablando de gestionar la base de datos desde nuestro código HTML. Por lo tanto, no es como con MySQL u otros SGBD en los que desde el SGBD creas la base de datos, tablas etc etc. Aquí todo se hace desde nuestro HTML.
Pero… ¿creando bases de datos desde HTML? Sí, gracias a las API’s de Javascript que forman parte de HTML5.
Así pues, partimos de un documento HTML básico:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB: Almacenamiento local con HTML5</title> </head> <body> <!-- @TODO Código visible por el usuario. --> </body> </html>
Para trabajar con IndexedDB tenemos que escribir código Javascript, por lo que colocaremos en el HEAD la etiqueta en la que escribiremos nuestro JavaScript:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB: Almacenamiento local con HTML5</title> <script type="text/javascript"> </script> </head> <body> <!-- @TODO Código visible por el usuario. --> </body> </html>
Ya estamos listos para empezar. El primer paso es crear nuestra base de datos. La manera de trabajar con IndexedBD es, en parte, muy sencilla:
Contamos con el objeto indexedDB que contiene todos los métodos y propiedades necesarias para trabajar con nuestra base de datos local. Sin embargo, ya sabemos que cuando hablamos de Javascript del lado del cliente entran en juego los diferentes navegadores web y no todos tienen disponible el objeto indexedDB en el mismo lugar. Para arreglar este problema, lo primero que hacemos es definir correctamente el objeto indexedDB, con la siguiente línea:
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
Muy bien, ya podemos utilizar indexedDB sin problemas. ¿Con qué estábamos? Sí… creando la base de datos. Bien, la sintaxis para crear la base de datos es:
dataBase = indexedDB.open("Nombre de la base de datos", "Versión de la base de datos");
Con esta línea de código, lo que conseguimos es que en la variable dataBase tengamos el «conector» abierto a nuestra base de datos.
Puede que te parezca extraño que para crear una base de datos, se utilice el método open()… pues sí, al ejecutar open, lo que va a ocurrir es que se va a intentar abrir la base de datos y, si no existe, se crea. Además, el método open recibe dos parámetros:
- Nombre de la base de datos: Pues eso… la base de datos que queremos abrir.
- Versión de la base de datos: Es un parámetro opcional… si no se especifica se abrirá la conexión utilizando 0 como número de versión. Este parámetro es importante, porque se utiliza para realizar modificaciones de estructura en nuestra base de datos. Aunque pueda parecer que podremos tener varias versiones de una misma base de datos no es así. Siempre tendremos una única versión para cada base de datos… realmente lo que conseguimos con este valor es la ejecución de ciertas líneas de código dónde haremos cosillas.
Trasladando este código a nuestro documento HTML, tenemos el siguiente resultado:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB: Almacenamiento local con HTML5</title> <script type="text/javascript"> var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; function startDB() { dataBase = indexedDB.open("object", 1); } </script> </head> <body onload="startDB();"> <!-- @TODO Código visible por el usuario. --> </body> </html>
Bien… ya tenemos nuestra base de datos creada… pero, como es lógico, está totalmente vacía. Necesitamos crear las colecciones de objetos que serán nuestras tablas de la base de datos.
Creando una colección de objetos o tabla en nuestra base de datos IndexedDB
En este punto tenemos la base de datos creada y en la variable dataBase todo lo necesario para trabajar con ella.
Para crear una colección de objetos dónde almacenar nuestra información, utilizaremos la propiedad onupgradeneeded que está definida en la interfaz IDBOpenDBRequest. Para utilizarla tenemos que definirla como método para nuestro objeto dataBase, o sea:
dataBase.onupgradeneeded = function (e) { };
Es importante tener claro cuándo se ejecuta nuestro método onupgradeneeded y qué debemos escribir en él.
Cuando se ejecuta el método onupgradeneeded
El método onupgradeneeded se ejecuta cuando se crea una nueva versión para nuestra base de datos. Así pues, se ejecutará tanto cuando la base de datos se crea por primera vez (puesto que se crea la primera versión de la misma) o cuando abrimos una base de datos existente, pero especificando una versión diferente a la almacenada.
Qué debemos escribir en el método opupgradeneeded
Teniendo claro que el método se ejecuta cuando se crea una nueva versión de una base de datos, la cosa está clara: Deberemos incluir todas las instrucciones necesarias para crear o editar la estructura de nuestra base de datos.
Como estamos creando por primera vez la base de datos, lo que haremos será crear nuestras colecciones de objetos y su estructura básica.
Creando la colección/almacén de objetos
Dentro de nuestro onupgradeneeded, lo primero que tenemos que hacer es recuperar el conector de la siguiente manera:
active = dataBase.result;
Ya tenemos en la variable active la conexión abierta. Lo siguiente es crear un almacén de objetos:
active.createObjectStore("colección", opciones);
El método createObjectStore espera dos parámetros:
- colección: El nombre del almacén de objetos… lo que en una base de datos tradicional sería el nombre de una tabla.
- opciones: Un objeto con las siguientes propiedades:
- keyPath: La propiedad que actuará como llave única de nuestra colección… porque sí, tenemos llaves únicas. Aunque lo que almacenamos en la colección son objetos, podemos indicar que en todos los objetos existe un parámetro que actuará a modo de lo que sería una llave única (primary key) en sistemas SQL.
- autoIncrement: Booleano que informa si el keyPath será autoincremental o no. Si ponemos este valor como true, cuando agreguemos objetos a nuestra colección no deberán tener la propiedad keyPath puesto que este valor lo rellenará automáticamente IndexedDB.
Por lo tanto, si queremos crear un almacén llamado «people» que tendrá por clave primaria la propiedad «id» que será un valor autoincremental, el código es el siguiente:
object = active.createObjectStore("people", { keyPath : 'id', autoIncrement : true });
Agregando índices a nuestra colección
Si has trabajado con SGBD sabrás que además de las llaves primarias tenemos otra serie de índices (llaves únicas, fulltext, etc)… pues IndexedDB no iba a ser menos!
Ya tenemos nuestra colección «people» en la cual se almacenarán objetos con una propiedad llave «id», pero también queremos que la propiedad «name» sea un índice y que la propiedad «dni» sea un índice único (no podrán existir dos objetos en el almacén con el mismo valor en dni).
Las llaves son muy importantes, puesto que cuando queramos hacer búsquedas en nuestros almacenes de objetos sólo podremos hacerlas en base a los índices creados (el keyPath es el índice por defecto).
La sintaxis para agregar índices es la siguiente:
object.createIndex('name', 'field', options);
- name: El nombre que le vamos a dar al índice.
- field: El nombre de la propiedad que se almacenará en el índice.
- options: Objeto con las opciones del índice
- unique: Booleano para indicar si el índice debe ser único o no.
Teniendo esto en cuenta, para nuestro ejemplo el código sería:
object.createIndex('by_name', 'name', { unique : false }); object.createIndex('by_dni', 'dni', { unique : true });
Controlando el resultado
Al igual que tenemos onupgradeneeded existen los métodos onsuccess y onerror que utilizaremos para realizar las acciones pertinentes según tengamos algún error o no:
- onsuccess: Se ejecutará cuando la conexión se haya realizado correctamente, sin producirse ningún error. Se lanza después del método onupgradeneeded. Vamos, que todo se creó sin problemas.
- onerror: Se ejecutará cuando falle el open()… ya sea por un fallo en la apertura en sí como por algún error en el método onupgradeneeded.
En base a esto, creamos el siguiente código, que informará con un alert del resultado:
dataBase.onsuccess = function (e) { alert('Base de datos cargada correctamente'); }; dataBase.onerror = function (e) { alert('Error cargando la base de datos'); };
Código final para la creación
Con todo lo explicado, el código de nuestro documento HTML es el siguiente:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB: Almacenamiento local con HTML5</title> <script type="text/javascript"> var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; function startDB() { dataBase = indexedDB.open("object", 1); dataBase.onupgradeneeded = function (e) { active = dataBase.result; object = active.createObjectStore("people", { keyPath : 'id', autoIncrement : true }); object.createIndex('by_name', 'name', { unique : false }); object.createIndex('by_dni', 'dni', { unique : true }); }; dataBase.onsuccess = function (e) { alert('Base de datos cargada correctamente'); }; dataBase.onerror = function (e) { alert('Error cargando la base de datos'); }; } </script> </head> <body onload="startDB();"> <!-- @TODO Código visible por el usuario. --> </body> </html>
Al ejecutarlo, el resultado será el esperado:
Próximos pasos
Ya tenemos nuestra base de datos creada con un almacén de objetos (tabla) que contendrá los diferentes objetos que conformarán los datos almacenados. Los próximos pasos son:
- Insertar objetos en el almacén.
- Listar los objetos de un almacén.
- Actualizar objetos de nuestro almacén.
- Buscar objetos en nuestro almacén.
Recursos
Código en GitHub:
https://github.com/rolando-caldas/IndexedDB/tree/master/src/01-createDatabaseAndObjectStore
me encanto mucho este post, muy completo, aunque tengo una duda, en este momento estoy tratando de hacer un juego de cartas online, obviamente necesito una base de datos, la cuestion esk necesitaria puntaje y todo, mi pregunta es, puedo usar indexeddb??, o necesito otra clase de base de datos para la cual asociar, gracias
Buenas! Gracias por tu mensaje. En principio, por lo que comentas podrías llevarlo a cabo sin problemas con IndexedDB. Lo único que deberías plantearte es si para tu objetivos necesitas algo tan «potente y complejo» como IndexedDB, o te sirve la sencillez de LocalStorage (https://rolandocaldas.com/html5/localstorage-en-html5)
saludos!
muchisimas gracias por responder, desde ayer he estado leyendo todos los post de html5, y sinceramente son entendibles e interesantes :). Volviendo al tema, te comento, el juego de cartas psss es online, una persona se enfrenta contra otra, se k se necesitan de los websockets, k tambien ando leyendo sobre eso, pero la cuestion esk si alguno de los 2 ganas, obtendran unos puntos, eso se vera en un raking general, para k todas las personas k jueguen puedan ver , si eso es local, significa k esa tabla de raking no podra ser visualizada para los demas no?, entonces kiere decir k necesitaria una base de datos k este del lado del servidor, o es posible con indexedDB??, muchas gracias de antemano y disculpa molestias
Necesitas una base de datos del lado del servidor, aunque también deberías tener una base de datos local con IndexedDB porque debes contemplar la posibilidad que durante la partida se produzcan pérdidas de conexión, por lo que los movimientos/puntos deberás guardarlos en el dispositivo hasta que se recupere la conexión, momento en el que se sincronizaría con la base de datos del servidor y se propagaría al resto de dispositivos vinculados.
vale muchas gracias por tu pronta respuesta, por lo tanto necesitaria mysql o sql server con php para la base de datos del lado del servidor verdad??, e indexeddb de lado local. Interesante lo k mencionas, sincronizar luego de k exista la conexion, interesante, muchisimas gracias.
Pingback: Base de datos local en HTML5: IndexedDB – The Forgotten Code
Hola estoy siguiendo tu tutorial y sabes me da error, y no logro ubicar el problema. El navegador queda en blanco, y Firebug muestra lo siguiente
«UnknownError
dataBase = indexedDB.open(«object», 1);»
Primero prueba en chrome por si acaso. Si en chrome te falla revisa todo pq algo estará mal. Si no… prueba en firefox con window.indexedDB.open
Hola me gustaria saber en que parte quedan almacenados los datos que se almacenan en indexedDB (ruta de la carpeta)
Eso depende de tu sistema operativo y navegador. Por ejemplo, para chromium en Debian/Ubuntu es $HOME/.config/chromium/Default/IndexedDB/
Hola Rolando te doy gracias de antemano por todo el tiempo que dedicas para enseñar en tu web.
La verdad es que me gusta y quiero felicitarte por compartir tus conocimientos.
Una consulta, si apagas el movil se pierde la información ???????
con IndexedDB no, es persistente.
Es posible sincronizar indexedDb con una bd de Sql Server? Vi que hablas de mantener la aplicacion funcionando aunque haya perdidas de conexion, ese es el caso en el que estoy trabajando. Tengo un sistema de ventas que utiliza una bd centralizada y a la que los vendedores acceden via remota cuando se agarran alguna señal de Wifi estable en el hotel. Lo que me gustaria es ver si con IndexedDb ellos podrian trabajar con la aplicacion sin contar con conexion y al tomar una señal Wifi que se realice la sincronizacion. Si tienes algun ejemplo te agradeceria lo compartas.
hola , estoy con una base de datos que no consigo crear 3 almacenes en la misma base de datos, y tampoco se como recuperar los datos, me podrias ayudar, no consigo ninguna explicacion en ningun blog , solo crean 1 base con 1 tabla.
muchas gracias, me ha aclarado muchas cosas tu articulo.
marta
Hola, Muchas gracias por este estupendo artículo.
Lo estoy siguiendo con mucho interés, y me surge una duda, que creo que es importante:
He hecho pruebas de la aplicación en diferentes navegadores, y se generan bases de datos diferentes según el navegador.
Si no he cometido algún error, y es que es así, considero que es un problema importante.
¿Hay alguna manera de que la base de datos sea única y no dependa del navegador?
Muchas gracias: José María
Buenas,
Efectivamente, una base de datos por navegador, ten en cuenta que es el navegador quien almacena la base de datos, por lo que no es compartida entre navegadores. Realmente no es un problema, el verdadero problema sería que el acceso fuese compartido por los navegadores respecto a lo que a seguridad se refiere.
Para llevar a cabo lo que quieres, tendrías que complementar el almacenamiento local con una sincronización con un servidor, de forma que pudieses propagar los cambios. Un poco en la línea de lo que haces con una app movil, que tienes tu BD en local (con indexedDB, sqlLite o lo que sea) y la sincronizas con un servidor, de forma que te permite trabajar en local y offline, pero permitiendo que ante un cambio de dispositivo (por ejemplo), la info se pueda trasladar de forma transparente al usuario.
saludos!
Hola, me puedes ayudar, quisiera conectar con una base de datos en Filemaker13pro desde el navegador y recuperar datos, me gustaría hacerlo con Indexeddb es posible, un saludo y gracias
Buenas si no he entendido mal donde pone
dataBase = indexedDB.open(«object», 1);
se puede cambiar el nombre de la base de datos como por ejemplo:
dataBase = indexedDB.open(«MiBase», 1);
si lo cambio me dice que la base de datos no carga correctamente.
Muchas gracias
Buenas,
Entendiste correctamente. Lo acabo de probar tanto en firefox como chrome y sin problemas, te dejo el código en https://rolandocaldas.com/ejemplos-blog/indexedDB/indexMiBase.html
Soy nuevo en esto de programación para móviles, lo que quiero y necesito hacer es crear una base de datos en el móvil, no necesito conexión a internet, entonces mi pregunta es: ¿donde se almacenaría la bd? ¿como accedo a ella? y si quisiera almacenarla en la microSD, ¿como se haría?.
De paso ¿cual es el siguiente blog para introducir, editar, borrar y listar contenido de las colecciones?.
Gracias por tu tutorial, bien explicado, ¡ánimo sigue haciendo lo que haces!
La base de datos se almacena en el espacio del disco reservado al navegador, se hará en la SD o no en función de dónde guarde la info el navegador. Lo normal es que ese espacio esté en la memoria del móvil, para hacerlo en la SD tendría que hacerse cambios en el móvil concreto.
En «Related Posts» tienes los siguientes artículos que hay ahora en el blog sobre indexedDB, por orden serían:
IndexedDB: Tu base de datos local en HTML5
IndexedDB: Agregando objetos al almacén
IndexedDB: Recuperando los datos almacenados
Hola Rolando,
Te paso el código que tengo y lo que quiero hacer, En primer lugar quiero tener una tabla o almacen de objetos por nombre «config», con datos pre instalados, un campo de id = 1 y otro campo sunmon = 0. Al ejecutar el código en un dispositivo real (móvil) me muestra el mensaje de que la base ha sida creada satisfactoriamente, pero llegado al punto de pre instalar la información no muestra ningún mensaje, por lo que deduzco que no se llegó a generar, Después trato de leer la info siguiendo tu código del blog , con algunos pequeños cambios, me dice que no hay datos que mostrar.
El funcionamiento de la BD no es en base a funciones sino de forma automática generar BD y pre instalar los datos, con otro proceso que aún no he escrito sería darle el mantenimiento a otro almacen , me refiero a actualizar o editar, borrar, listar y añadir.
Gracias por tu ayuda.
Aquí va el código:
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
function startDB() {
dataBase = indexedDB.open(«ABC», 1);
dataBase.onupgradeneeded = function(e){
active = dataBase.result;
object = active.createObjectStore(«config»,{keypath: «id», autoincrement: false});
object.createIndex(«by_sunmon»,»sunmon»,{unique: false});
};
dataBase.onsuccess = function(e){
alert(«DataBase was successfully created»);
};
dataBase.onerror = function(e){
alert(«DataBase was not successfully created»);
};
var active = dataBase.result;
var data = active.transaction(«config», «readwrite»);
var object = data.objectStore(«config»);
var request = object.put({
id: 1,
sunmon: 0
});
request.onerror = function(e){
alert(request.error.name+’\n\n’+request.error.message);
};
data.oncomplete = function(e){
alert(«Data succesfully added»);
};
var id = 1;
var outerHTML = »;
var active = dataBase.result;
var data = active.transaction(«config»,»readonly»);
var object = data.objectStore(«config»);
var request = object.get(parseInt(id));
var elements = [];
request.onsuccess = function () {
var result = request.result;
elements.push(result.value);
weekFirstDay = result.sunmon;
};
outerHTML += ‘\n\
\n\
‘ + elements[key].id + ‘\n\
‘ + elements[key].sunmon + ‘\n\
\n\
\n\
‘;
document.querySelector(«#elementsList»).innerHTML = outerHTML;
}
Buenas! la verdad, super bien explicado, gracias por darte el tiempo de hacer los videos y ademas escribir la explicación. me fue de muchisima ayuda!
aprobecho a hacerte una consulta que me quedo en duda
Cada vez que el user entra a esta pagina, qué pasa?
no se sobreescribe la BD? se verifica solo si ya existe?
Desde ya gracias!
Buenos días, sabe tengo dudas sobre la implementación con indexedDB. Estoy realizando una aplicación para Android, estoy usando apache cordova. Hice todo lo que indica en este tutorial que por cierto es buenísimo!! Pero al hacer correr me sale la alerta en la que existe un error al cargar la base de datos. y no se a que se debe, ya instale el plugin para apache cordova. Que puedo hacer???
Muchas Gracias
¿Hola buenas tardes, llevo días leyendo sobre sqlite ya que quiero hacer una aplicación con una Base de Datos potable, al principio pensé que había encontrado la solución a mi problema en sqlite, pero he leído aquí que la Base de Datos se guarda en la carpeta del navegador, por lo cual si me llevo mi aplicación a otra computadora se perderán los datos pues la Base de Datos se queda en la carpeta del navegador de la otra computadora verdad?
Entonces mi pregunta es ¿sabes alguna manera de hacer una aplicación la cual yo pueda guardar en una memoria, en la computadora o en cualquier otro lugar y la base de datos pueda ser movida junto con ella?
Genial, muy bien explicado, felicitaciones y gracias por compartir tus conocimientos. Corrígeme si estoy mal pero por lo que veo tiene mucho parecido a las bases de datos no relacionales estilo Momgo, y Json, claro eso es obvio por ser las notación de objetos de javascript
Es una base de datos que guarda la data en el navegador activo (desaparece la data si entramos en otro navegador o limpiamos temprales) , es una buena opción para juegos simples o información irrelevante, que necesitan algo de memoria ,pero ni considerarlo para para formularios de llenado de información por la volatilidad se pierde la información , es preferible usar un BD pequeña como Sqlite en una app ,pero para desktop es preferible una aplicación cliente con mysql o sqlitebrowser , la persistencia de datos se guardara de manera segura en una Base de datos Relacional.
Buena tarde excelente explicación. Solo tengo una preguna, si decidiera exportar los datos guardados en la base ya sea a un excel o una base de datos como sql server… como podria hacerlo?
De ante mano muchas gracias por tu ayuda! 😀
Que html5 venga con una base de datos noSQL me parece algo hermoso. Difiero de algunas personas que comentan que es preferible usar otra base de datos… No difiero específicamente por eso, sino por la justificación que dan.
Tranquilamente podemos crear una BD de este tipo para guardar todos los datos no sensitivos de nuestra aplicación. Esto aumenta la velocidad haciendo que el usuario no note las tediosas llamadas al servidor.
Luego, cuando la aplicación detecte que no se está solicitando ningún recurso, puede ir actualizando nuestra bd del lado servidor.
Sí, considero que esta bd no es un reemplazo, es un extra. La BD del lado servidor no debe ser removida salvo que no nos importe de ninguna forma los datos de nuestros usuarios. Y cuando hablo de BD del lado servidor, tampoco importa si es SQL o noSQL, uno elije la que es más conveniente para nuestra aplicación. Aunque últimamente, las noSQL me parecen mucho más cómodas para trabajar.
Muy buen video y explicación! Soy muy nueva usando javascript y estoy viendo este tema por primera vez, y la verdad me has dejado todo muy claro cuando antes de ver este post me parecía todo muy complicado. Nunca comento nada, pero quería agradecerte por dedicarte así haciendo estos tutoriales! Saludos
Hola! ¿Cambiaría algo para abrir la base de datos en una nueva ventana? Lo he estado intentando pero no lo he logrado. Muchas gracias por el desarrollo de esta línea de tutoriales, ha sido excelente!!
Amigo excelente video, te cuento. Quiero hacer una aplicacion web para una IPS (Institucion Prestadora de Salud) es para apartar citas, que buscar citas medicas, generar formulas medicas, cargar y almacenar datos de pacientes…etc, es posible usar idexeddb para lo que quiero hacer?
SALUDOS FELICIDADES POR EL POST.
DISCULPA INDEXEDDB PODRA FUNCIONAR DEL LADO DEL SERVIDOR EN FORMA MULTIUSUARIO, ES DECIR UNICAMENTE CODIGO NATIVO DE HTML 5 E INDEXEDB O ALGUNA OTRA APLICACION DE BASES DE DATOS LIGERA PARA ALMACENAR Y CONSULTAR INFORMACION.
A LO QUE VOY ES QUE NO NO QUIERO TENER EN EL SERVIDOR INSTALADO UN MOTOR DE BASES DE DATOS COMO SQL SERVER , NI TAMPOCO PAGINAS ASPX ETC.
UNA AQPLICACION WEB QUE ESE DEL LADO DEL SERVIDOR Y QUE PUEDA YO INSTALARLA UNICA MENTE CON ARCHIVOS DE HTML, JAVA SCRIPT Y QUE PUEDA FUNCIONAR.
SI SABES O CONOCES ALGO AL RESPECTO GRACIAS POR TU ATENCION.
Hola Rolando, gracias por compartir tu conocimento, una pregunta simple: este tutorial es válido en apache cordova? para una posterior app en android?. Gracias
Felix, esto es válido para cualquier desarrollo hecho con HTML5 y Javascrip.
Disculpá mi torpeza y desconocimiento, pero me gustaría saber adónde se almacenan los datos cargados. Sólo necesito precargar la db para consultar desde el html. Gracias
Hola muy bueno tu post, pero tambien quisiera saber como realizar consultas a la bd, ya sea insert, update, delete o select a los datos.
muchas gracias por el artículo
Saludo Rolando. Necesitaba algo rápido y poderoso para almacenar información y conocí esta excelente BD. Excelentes publicaciones. Muchas gracias y felicitaciones.
Sos un crack
Pingback: Base de datos local html5 – Conociendo aun mas
cuando subirás como hacer actualizas a los registros y eliminar registros, dados parámetros de busquedas
¿En qué archivo de disco se almacena esta base de datos IndexedDB?
¿Puedo copiar este archivo a otra máquina para que su navegador pueda leer los mismos datos que registré en mi máquina?