Artículo

---

0 ¡votar!

Almacenamiento de datos utilizando Web SQL Database

HTML 5 proporciona además del almacenamiento local, otro tipo de almacenamiento basado en base de datos locales, que utiliza una variante de SQL para poder ejecutar las instrucciones.

Esta funcionalidad solo está disponible actualmente en aquellos navegadores que utilizan Webkit como motor de renderizado, entre ellos Google Chrome, Safari,....

El primer paso que hay que hacer es conseguir la conexión a nuestra base de datos local. Para poder conectarse, hay que utilizar la función openDatabase, que necesita cuatro argumentos:

• name: Nombre de la base de datos
• versión: Versión de la base de datos
• descripción: Descripción que le damos a la base de datos para saber el propósito de esta.
• Size: Es el tamaño que queremos darle a la base de datos, para que el navegador guarde ese espacio para este fin.

var db = openDatabase("DemoSqlStorage", "1.0", "Base de datos de prueba", 5*1024*1024);

La función devolverá “null” en caso de que no se pueda conectar a la base de datos, por lo que nos puede servir para comprobar que se ha realizado bien la conexión.

openDatabase devolverá un objeto que será donde se ejecuten las transacciones por medio del método transaction. Este método recibe 3 argumentos.

• transaction_function(tx): Función anónima encargada de realizar la transacción.
• error_callback(tx): Se trata de una función anónima que se ejecuta en caso de fallo de la transacción.
• success_callback(tx): Función que se ejecuta si la transacción tiene éxito.

error_callback = function(tx){ alert("Error en la transacción"); };
success_callback = function(tx){ alert("Transacción correcta"); };
db.transaction(function(tx){}, error_callback, success_callback)

Para poder realizar las consultas, se utiliza el método executeSQL. Este método puede recibir 4 argumentos, executeSQL(sql, args, success_callback(tx,result), error_callback(tx,error).

Argumento sql, es una consulta SQL.

executeSql('SELECT title FROM movies');

Argumento args, lo que nos permite es crear la consulta sin valores, y estos se añadirán según los valores que se indiquen en este argumento.

var id = 1202;
executeSQL('SELECT title FROM movies WHERE id = ?', [id]);

El argumento success_callback(tx,result), es la función que se ejecuta cuando la consulta se ejecuta correctamente. Reciben como argumentos la transacción y el objeto resultado.

var id = 1202;
executeSQL('SELECT title FROM movies WHERE id = ?', [id], function(tx, result){});

El útlimo argumento es la función error_callback(tx, error), que se ejecuta cuando la consulta no se ejecuta correctamente. Recibe como argumento la transacción y el objeto resultado.

var id = 1202;
executeSQL('SELECT title FROM movies WHERE id = ?', [id], function(tx, result){}, function(tx, error){});

Cuando la consulta se ejecuta con éxito, en el callback success_callback(tx,result), result es un objeto que contiene los siguientes atributos:

• insertId: Contiene el id de la última fila insertada. Si no se inserta nada, lanzará una excepción.
• rowsAffected: Indica el número de filas afectadas por la consulta, si se ejecuta un update. Si es un select, el valor será 0.
• rows: Devuelve una lista de filas devueltas por la consulta SQL. Esta lista está formada por la siguiente interfaz: lengh que indica el número de filas e item(n) que nos devuelve la fila del índice indicado.

Cuando la consulta ejecutada devuelve un error, en el error_callback(tx,error), error es un objeto con los siguientes atributos:

• code: Código de error.
• Message: Mensaje de error.

Ejemplo de una consulta errónea:

var db = openDatabase("DemoSqlStorage", "1.0", "Base de datos de prueba", 5*1024*1024);
db.transaction(function(tx){
tx.executeSql('select * from productos' ,[],
function(tx, result){
alert('Consulta exitosa');
},
function(tx, error){
alert('Se ha producido el siguiente error:\n' + error.message);
}
);
});

Ejemplo de una consulta correcta:

var db = openDatabase("DemoSqlStorage", "1.0", "Base de datos de prueba", 5*1024*1024);
db.transaction(function(tx){
// En este caso creamos la tabla antes de consultarla
tx.executeSql('CREATE TABLE productos (id real unique, name text)');
tx.executeSql('select * from productos' ,[],
function(tx, result){
alert('Consulta exitosa\n '+result.rows.length + ' filas encontradas');
},
function(tx, error){
alert('Se ha producido el siguiente error:\n' + error.message);
}
);
// Borramos la tabla
tx.executeSql('DELETE productos');
});

Para realizar inserciones en la base de datos, la forma de actuar será la siguiente.

var nombre = "Producto 1";
var precio = 220;
db.transaction(
function(tx){
tx.executeSql("INSERT INTO productos (name, price) values (?,?)", [nombre, precio]);
}
)

Como hemos visto anteriormente, en la consulta, se sustituirán las “?” por el valor que tengan “nombre” y “precio”.

Ahora veremos como crear una tabla.

var db = openDatabase("DemoSqlStorage", "1.0", "Base de datos de prueba", 5*1024*1024);
var sql = "CREATE TABLE productos(id REAL UNIQUE, name TEXT, price FLOAT, timestamp REAL)";
db.transaction(
function(tx){
tx.executeSql(sql, [],
function(tx, result){
alert('Tabla creada');
},
function(tx, error){
alert('Error: ' + error.message);
}
);
}
);

La opciones básicas de selección, borrado, modificación se hacen igual que se hacen sobre una base de datos normal.

Vía: theproc.es

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios