Offline y almacenamiento

Que es WebSQL

Una forma de fácil y corta de explicarlo, es decir;

Que es una base de datos que se almacena de forma temporal en el cache del navegador.

¿Por que usarla?

Es muy útil para las aplicaciones web que requieran trabajar de forma OFFLINE
Esta base de datos a diferencia de IndexDB se maneja a través de sentencias sql
Es compatible con la libreria de córdoba que permite la emulación a aplicaciones móviles.

NOTA:

Esta base de datos solo no esta soportada por IE ni FireFox

Los datos almacenados son almacenados en la cache del navegador, por lo que al vaciar la cache también se elimina la base de datos

Como averiguar su soporte

function supports_local_database() {
    return !!window.openDatabase;
}

//true, tiene soporte

Pasos para trabajar con WebSQL

3 pasos

1. Abrir base de datos

var size = 5*1024*1024; 

// "Nombre","Version","Descripcion","size","success calback"

db = openDatabase("DB1", "1.0","prueba", size, function () {
   console.log("La base de datos se ha sido creada");
});

Transacciones

//Iniciamos la Transaccion

db.transaction(function(tx) {
  tx.executeSql("Query",
    [] /*Parametros*/, 
    SuccessCallback /*Función exitosa*/, 
    errorCallback /*Función error*/);
});

//Iniciamos la Transaccion

db.readTransaction(function(tx) {
  tx.executeSql("Query",
    [] /*Parametros*/, 
    SuccessCallback /*Función exitosa*/, 
    errorCallback /*Función error*/);
});

Lectura y escritura

Insert, Update y Delete

Solo lectura

Select

Explicación

Como podemos ver existen dos tipos de transacciones:

transaction
readTransaction

La primera es de lectura-escritura, mientras que la segunda es de sólo lectura.

Dentro de estas transacciones nos encontramos con executeSql, a la cual se le pasa primero el query, seguidamente de un array con los valores de los argumentos del query y finalmente una función de callback y otra de callback para el caso de que existan errores.

2. Crear tablas

Los querys son compatibles con SQLite

//Iniciamos la Transaccion

db.transaction(function(tx) {
  tx.executeSql("create table if not exists persona("+
      "id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,"+
      "nombre TEXT NOT NULL,"+
      "direccion TEXT NULL,"+
      "telefono TEXT NULL"+
    ")", 
     function(){
        console.log("tabla creada correctamente");
     },
     function(){
        console.log("ocurrio un error en la sintaxis");
     }
  );
});

3. Ejecutar Querys

Insertar

function InsertItem() {
	var nombre = document.getElementById('txtNombre').value;
	var telefono = document.getElementById('txtTelefono').value;
	var direccion  = document.getElementById('txtDireccion').value;

	db.transaction(function(tx) {
		tx.executeSql("INSERT INTO persona  VALUES (?, ?, ?)", 
			      [nombre, telefono, direccion], 
			      SelectAll());
	});		
};

3. Ejecutar Querys

Seleccionar

function SelectAll(id) {
	db.readTransaction(function(tx) {
		tx.executeSql("Select * from persona id = ?", 
                              [id], 
                              CargarContenido
                             );
	});	
};

// ("Transaction", "Resultado")
function CargarContenido (tx,rs) {
	var contenido ="";
	for (var i = 0, size = rs.rows.length-1; i <= size ; i++) {
		contenido = contenido + "<tr>"+
					"<td>"+rs.rows.item(i).id+"</td>"+
					"<td>"+rs.rows.item(i).nombre+"</td>"+
					"<td>"+rs.rows.item(i).direccion+"</td>"+
					"<td>"+rs.rows.item(i).telefono+"</td>"+
					"</tr>";
	}
	console.log(contenido);
	document.getElementById('tblPersonasBody').innerHTML = contenido;
}

3. Ejecutar Querys

Cargar contenido

A trabajar con esta maravilla