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

WEBSQL

By yhoan andres galeano urrea

Made with Slides.com

WEBSQL

Trabajo con WebSQL y JS

  • 1,578

More from yhoan andres galeano urrea