HTML 5 (III) –Bases de datos locales

Posiblemente una apuesta interesante de HTML5 es la idea de eliminar, de alguna forma, el uso de cookies.

Por un lado, debido a que estos pueden mantener poca información, y por otro porque manipular la información interna resulta algo tedioso.

Una posibilidad es la implementación de Web SQL. Un pequeño motor “transaccional” de bases de datos dentro de nuestro navegador y manejado desde JavaScript.

Por supuesto, como HTML5 aun sigue en una pelea con él mismo, y los diferentes navegadores implementan algunas de las características que consideran más importantes para ellos, este motor no está disponible en todos los navegadores Web. En este caso, Internet Explorer y FireFox no soportan esta característica, pero nada dice que no lo harán en el futuro. Por ejemplo, Windows 8 y sus aplicaciones metro desarrolladas en JavaScript estarían soportando este tipo de funcionalidades, entre otras, lo que haría que Internet Explorer 10 también lo soporten (Pero esto no se si se debe a un error neuronal personal, o si realmente escuché o leí esto en algún lugar).

Como toda base de datos, lo primero que necesitaremos crear será la base de datos.

var db = openDatabase('base', '1.0', 'Mi base de datos', 2 * 1024 * 1024);

El abrir una base de datos sirve tanto para crear la misma como para abrir una conexión a esta. Si ya existiera, se usaría la base de datos existente, si no se crearía una nueva. En este caso los parámetros son intuitivos (Nombre de base de datos, versión, título de la misma y tamaño).

image

En este caso, Chrome nos presenta una interfaz interesante para inspeccionar estos objetos.

En la imagen vemos que la base de datos se creó con éxito.

Algo interesante, y posiblemente un modelo a seguir por otros lenguajes de programación, es que toda ejecución de consultas sobre la base de datos se realiza dentro de una transacción. Si la ejecución o el código interno falla, el rollback es automático.

if (db) {
    db.transaction(function (tx) {  
       tx.executeSql('CREATE TABLE IF NOT EXISTS USUARIOS (id unique, nombre, apellido)');
       tx.executeSql('INSERT INTO USUARIOS VALUES (1, "Matias", "Iacono")');
       tx.executeSql('INSERT INTO USUARIOS VALUES (2, "Juan", "Apellido")');
    });
}

image

La ejecución de la transacción nos retornará un punto de ejecución sobre esta transacción, por lo tanto, todas las ejecuciones sobre la misma se harán dentro de este contexto.

Es importante aclarar que el elemento transaction() puede contener un segundo parámetro para manejar la excepción generada por la ejecución de la transacción.

 

db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS USUARIOS (id unique, nombre, apellido)');
   tx.executeSql('INSERT INTO USUARIOS VALUES (1, "Matias", "Iacono")');
   tx.executeSql('INSERT INTO USUARIOS VALUES (2, "Juan", "Apellido")');
}, function (err) {
    alert(err);
});

image

Si ejecutamos por segunda vez el código, el valor de la columna ID no resulta único, por lo tanto la transacción es cancelada y la función del error es lanzada.

Por último, sobre este motor podremos realizar consultas, de la misma forma que el estándar SQL, pero también, sobre una transacción.

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM USUARIOS', [], function (tx, results) {
        var len = results.rows.length, i;
          for (i = 0; i < len; i++) {
            alert(results.rows.item(i).nombre);
          }
    });
});

image

La ejecución de este código SQL obtiene tres parámetros. El primero, la consulta a ejecutar, una lista de parámetros y la función que usaremos para manejar los resultados. En esta última, también obtendremos la transacción por si necesitáramos ejecutar otra consulta y el conjunto de resultados arrojados por la consulta.

Definitivamente este agregado de HTML5 puede llegar a ser una ventaja significativa sobre el uso de cookies y el almacenado de datos de forma temporal en el cliente. Posiblemente un punto no muy atractivo sea el hecho de que, si esta técnica se popularizara en el futuro (Y de seguro lo hará), tendremos cientos de sitios tratando de almacenar ingentes cantidades de datos localmente, haciendo de esta una mala práctica como muchas que hemos visto en los inicios del HTML. Por otro lado, esta propuesta sea una gran solución para trabajar con aplicaciones desconectadas a nivel empresarial, que puedan descargar algunos registros, o almacenarlos localmente hasta volver a obtener una conexión con los servidores.


3 comentarios on “HTML 5 (III) –Bases de datos locales”

  1. […] HTML 5: Bases de datos en el navegador By Matias Iacono […]

  2. Marg dice:

    Una informacion muy valiosa para los que estamos verdes en Html5, gracias

  3. Pablo Cuellar dice:

    leyendo tu articulo se me vino a la mente una pagina de almacenamiento con un nombre parecido a la fallecida Megaupload, la cual para la descarga te pide autorización para almacenar datos temporales localmente, que me imagino son los datos de la descarga por si se corta, por si la pausas o algo parecido.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s