miércoles, 2 de junio de 2010

Web SQL en html 5

Con la llegada de html 5 los navegadores pondrán a disposición de los programadores web la tecnología web SQL.

Esta tecnología consiste básicamente en una base de datos local a los navegadores accesible desde javascript. Permitirá que las aplicaciones web puedan hacer mayor trabajo offline y sincronizarse cada cierto tiempo con el servidor.

El acceso a estas bases de datos se hace mediante SQL.
Para abrir una base de datos se necesita ejecutar lo siguiente.

function openDB(dbName){
var version = 1;
var db = window.openDatabase(dbName, version, dbName, 2*1024);
return db;
}

Una vez abierta la base de datos para ejecutar SQL podemos disponer de las siguientes funciones.

function executeSQL(db, sqlString, args){
db.transaction(function(t){
t.executeSql(sqlString, args);
});
}

function executeSQL(db, sqlString, args, callback){
db.transaction(function(t){
t.executeSql(sqlString, args, callback);
});
}

Se puede pasar opcionalmente un callback a la función executeSQL, es especialmente útil en las consultas para tratar el resultado. Un ejemplo de callback para consultas es showEntries definida más adelante.
Este es un ejemplo típico de uso de web SQL.

function insertEntry(db, name){
executeSQL(db, "INSERT INTO entries(name) VALUES (?)", [name]);
}

function selectAllEntries(db, callback){
executeSQL(db, "SELECT * FROM entries", [], callback);
}

function showEntries(t, rs){
var entry;

for(var i=0; i<rs.rows.length; i++){
entry = rs.rows.item(i);
alert(entry['name']);
}
}


var db = openDB("example");
executeSQL(db, "CREATE TABLE IF NOT EXISTS entries(id INTEGER PRIMARY KEY, name TEXT)", []);

for(var i=0; i<10; i++){
insertEntry(db, "test"+i);
}

selectAllEntries(db, showEntries);

0 comentarios: