HTML5 – Web SQL
octubre 22nd, 2010 • Programación, Tecnologías
Una de las cosas que más me ha atraído del HTML5 es la posibilidad de realizar consultas SQL a través de Javascript, si, si, como oís, consultas a BBDD desde Javascript. ¿Quién iba a pensar esto hace unos años?
Aclarándolo un poco, no es una base de datos como tal, es un repositorio de datos al cual se podrá acceder mediante sentencias SQL complejas (lo mas parecido a una BBDD). La BBDD se crea mediante Javascript, al igual que las tablas.
Realmente tiene mucha relación con la posibilidad de que se puedan cachear elementos, porciones o incluso una aplicación entera (Application Cache, otra novedad del HTML5) en el dispositivo o equipo, ya que podremos realizar consultas de datos en modo offline.
La principal aplicación de esta tecnología, será el poder tener una BBDD local y detectar mediante la aplicación si hay conexión a Internet, acceder a una BBDD online (pongamos un webservice) y actualizar los datos de esta BBDD.
Como veis está muy enfocado a dispositivos móviles, aunque la posibilidad de convertir una aplicación web en una de escritorio es fantástica.
Sin más preámbulos veamos una porción de código:
var db = openDatabase("mi_bbdd", "1.0", "Base de datos de ejemplo", 2 * 1024 * 1024);
Creamos/abrimos (si no existe la crea, si existe la abre) la base de datos ‘mi_bbdd’, especificando versión, comentario y tamaño estimado de la misma (se han realizado pruebas y aplicado tamaños de hasta 500Mb).
function leeNotas() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Notas(title TEXT, body TEXT)',[]);
tx.executeSql('SELECT * FROM Notas', [], function(tx, rs) {
for(var i = 0; i < rs.rows.length; i++) {
console.log(rs.rows[i]);
}
});
});
}
function insertaNota(title, text) {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO Notas VALUES(?, ?)', [ title, text ],
function(tx, rs) {
// …
},
function(tx, error) {
reportError('sql', error.message);
});
}
}
Primero creamos la tabla si no existe, realizamos una SELECT simple y mostramos datos por consola. Como no existen datos, insertamos uno de prueba, con funciones de success o de error para capturar eventos. Title y text son variables externas que se pasan por argumento a la función y el método ‘executeSql’ las mapea automáticamente para sustituirlas por las ‘?’. Fijarse que todo lo realizamos mediante el objeto ‘tx’.
Realmente es muy sencillo y no reviste mayor complicación. No es de extrañar que según pase el tiempo y estas nuevas funcionalidades del HTML5 (Javascript) se afiancen más, aparezcan librerías o frameworks para que su utilización resulte más sencilla aún.
Como este es el primero de los muchos artículos que espero escribir sobre HTML5, aprovecho (ahora que lo tengo fresco) y os dejo un ‘splash’ resumido de la gente de FOCUS.
Fuente:
http://www.w3.org/TR/offline-webapps/
http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html