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
WEBSQL
Trabajo con WebSQL y JS
- 1,609