Web SQL Database, tu base de datos en HTML5

Detalles

Creado en Viernes, 26 Febrero 2010 08:03

Última actualización en Jueves, 26 Abril 2012 15:04

Escrito por Domingo Varela

Visitas: 658

HTML5 nos introduce la posibilidad de disponer de un base de datos local almacenada en el navegador del usuario.

Mediante Web SQL Database, la W3C ofrece una API estándar destinada a manipular bases de datos en el lado del cliente mediante peticiones SQL de forma asíncrona. Un complemento ideal al Almacenamiento DOM que ya hemos visto en otras ocasiones.

Al igual que Google Gears SQL, con HTML5 será posible realizar peticiones complejas mediante SQL. Los chicos de HTML5Rocks ha creado una pequeña aplicación de ejemplo que funciona sobre Google Chrome y de la que he podido crear una pequeña versión reutilizable que podremos usar en nuestras aplicaciones web.

var webdb = {};
webdb.db = null;



// Función para crear la base de datos
webdb.open = function(options) {
	if (typeof openDatabase == "undefined") return;

	// Opciones por defecto
   	var options = options || {};
	options.name = options.name || 'noname';
	options.mb = options.mb || 5;
	options.description = options.description || 'no description';
	options.version = options.version || '1.0';


	// Definimos el tamaño en MB
   	var dbSize = options.mb * 1024 * 1024;


	// Cargamos la base de datos
   	webdb.db = openDatabase(options.name, options.version, options.description, dbSize);
}

// ExecuteSql
webdb.executeSql = function(sql, data, onSuccess, onError){
	if (!webdb.db) return;
	webdb.db.transaction(function(tx){tx.executeSql(sql, data,onSuccess,onError);});
}

Este código, nos permite realizar peticiones SQL tales como crear una nueva tabla, leer, borrar o modificar de ella, está claro que únicamente en los navegadores que lo permitan.

// Ejemplo

var opt = {
	name: "ejemplo",
	mb: 1,
	description: "Base de datos de ejemplo",
	version: "1.0"
};



// Abrimos la base de datos

webdb.open(opt);


// Creamos la tabla
webdeb.executeSql('CREATE TABLE IF NOT EXISTS ejemplo
 (ID INTEGER PRIMARY KEY ASC, texto TEXT, added_on DATETIME"', [],
			function(tx, r){
				alert("Tabla creada");
			},

			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});



// Insertamos un nuevo elemento

webdb.executeSql('INSERT INTO ejemplo (texto, added_on)
 VALUES (?,?)', ['Mensaje de ejemplo', new Date()],
			function(tx, r){
				alert("Elemento introducido");
			},

			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});

Esto nos permitirá crear aplicaciones más complejas gracias al almacenamiento de datos en la capa del cliente. Eso si, será mucho más útil cuando todos los navegadores lo incorporen.

Vía Anieto2k.