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);
			});

Comparte en tus Redes Sociales

Ocultar Sitios