Html5 trajo consigo muchas APIs, las cuales mediante su implementacion, ayudan a solucionar muchos problemas. Dentro de estas nuevas bondades se encuentran los diferentes tipos de almacenamiento local, los cuales permiten guardar una limitada cantidad de información dependiendo de el dispositivo, navegador, y el api. Estas son:
- LocalStorage
- SessionStorage
- WebSQL Database
- Indexed Database
- FileSystem API
- Application Cache
De todas estas, la cual vamos a trabajar es WebSql. Aunque no tenga soporte desde el 10 de noviembre del 2010, todavía hay navegadores que soportan el uso de esta. También, si se quiere saber cual es el tamaño en bytes de una cantidad de datos aproximado que se vaya a guardar, se puede recurrir a la siguiente herramienta, Browser Storage Abuser
- IE (No)
- Edge (No)
- Firefox (No)
- Chrome (Si, versiones 31 -49)
- Safari (Si, versiones 8 – 9)
- Opera (Si, versiones 34 – 32)
- Chrome para android (Si, versión 45)
- Opera mini (No)
- iOS Safari (Si, versiones 8.4 – 9)
Si alguien necesita alguna información acerca de que versión de que navegador, sistema operativo móvil puede usar alguna propiedad que estemos utilizando y evitar problemas cuando este un proyecto avanzado, recomiendo usar
Como ya se había dicho, también depende del dispositivo la capacidad de almacenamiento, tanto en móviles como en escritorio, lo máximo que se puede almacenar es 50mb, pero claro esto puede aumentar si es en móvil o escritorio, y también dependiendo del navegador. Bueno sin mas preámbulo, a desarrollar el ejemplo.
Lo primero que debemos hacer, es abrir nuestro IDE o el editor de código que usen. Yo usare el framework materializecss para darle un poco de estilo al ejemplo, ustedes pueden usar el que deseen. En cuanto al navegador recomiendo chrome.
Bueno primero, creare el diseño de manera rápida, no se preocupen por el código, facilitare todo para descargar y verlo funcionando en cualquier equipo.
Luego de que se coloque el estilo que cada quien quiera, le damos click derecho sobre nuestro navegador, en mi caso chrome, y le damos a la opción inspeccionar elemento, y luego damos click izquierdo sobre esta; para después dirigirnos a la opción Resources.
En la imagen anterior, podemos ver dentro de los diferentes tipos de almacenamientos el Web SQL, sobre el cual estamos hablando y vamos a desarrollar nuestra aplicación.
Después de haber creado, los archivos los cuales vamos a necesitar, en nuestro archivo javascript principal, colocamos lo siguiente:
var tareas = new Tareas();
function Tareas (){};
Tareas.prototype.CrearDB = function (){
var nombrecorto = 'DB Tareas';
var version = '1.0';
var nombrebase = 'List To-Do';
var size = 50*1024*1024;
var db = openDatabase(nombrecorto, version, nombrebase, size);
return db;
};
Tareas.prototype.Tabla = function (){
var db, SqlLista;
db = tareas.CrearDB();
SqlLista = 'CREATE TABLE IF NOT EXISTS Tareas(fila integer primary key, tarea text)';
db.transaction(function (tx){
tx.executeSql(SqlLista);
});
};En el código anterior, podemos ver como creamos la base de datos en al función CrearDB, consta de un nombre corto, de una version, un nombre corto, y el tamaño, el que se ve en el ejemplo es de 50mb.
Luego la función siguiente, vemos como se crea la tabla a utilizar, en este caso le puse el nombre de Tareas a la tabla, si necesitan utilizar mas tablas el proceso es el mismo, recomiendo que el string sea siempre asignado a una variable para nunca mezclar estos a mitad del código.
En la imagen anterior vemos dentro de el rectángulo rojo, la base creada y la tabla, solo se necesita llamar la función de crear la tabla, debido que la función de crear la base de datos retorna a esta, para que podamos llamarla e cualquier momento que necesitamos abrir la base de datos, ya sea para crear, guardar o eliminar. El código es el siguiente:
$(document).ready(function (){
tareas.Tabla();
});Ahora llego la hora de crear la función de insertar y eliminar
Tareas.prototype.Insertar = function (task){
var db, SqlInsert, SqlConsulta, cantidad, cero, fila;
db = tareas.CrearDB();
SqlInsert = 'INSERT INTO Tareas(fila, tarea) VALUES(?,?)';
SqlConsulta = 'SELECT * FROM Tareas';
cero = 0;
db.transaction(function (tx){
tx.executeSql(SqlConsulta, [], function (tx, results){
cantidad = results.rows.length;
//console.log(cantidad);
if(cantidad === cero){
fila = cantidad + 1;
tx.executeSql(SqlInsert,[fila, task]);
}else{
fila = cantidad + 1;
tx.executeSql(SqlInsert,[fila, task]);
}
});
tareas.Consultar();
});
};
Tareas.prototype.Consultar = function (){
var db, SqlConsulta, cantidad, cero, lista_tareas, i, html, task, error, mensaje;
db = tareas.CrearDB();
SqlConsulta = 'SELECT * FROM Tareas';
lista_tareas = $('#lista');
mensaje = $("#mensaje");
error = 'No hay una tarea para guardar';
cero = 0;
db.transaction(function (tx){
tx.executeSql(SqlConsulta, [], function (tx, results){
cantidad = results.rows.length;
if(cantidad === 0){
lista_tareas.empty();
html = '<tr>';
html += '<td class="row">';
html += '<div class="col s10">No hay Tareas</div>';
html += '</td>';
html += '</tr>';
lista_tareas.append(html);
}else{
lista_tareas.empty();
for(i=0; i<cantidad; i++){
task = results.rows.item(i);
//console.log(task);
html = '<tr>';
html += '<td class="row">';
html += '<div class="col s10">'+ task.tarea +'</div>';
html += '<button class="col s2 btn-flat" data-fila="'+ task.fila +'">';
html += '<i class="fa fa-times fa-lg"></i>';
html += '</button>';
html += '</td>';
html += '</tr>';
lista_tareas.append(html);
}
}
});
});
};En las funciones anteriores, se puede ver, como insertamos, a la hora de insertar el numero de signos de interrogación que se colocan en VALUES, deben ser la misma cantidad de los campos de la tabla en este caso son dos campos, entonces son dos signos de interrogación.
También en el momento de insertar, yo decidí peguntar, si ya existían tareas, para guardar auto incrementando la llave primaria, que en este caso, llame el campo fila, lo que hago es sumar el numero de filas mas una unidad.
Luego al momento de agregar la tarea a la lista en el documento HTML, utilizo la api data-fila, la propiedad data-* , y nos permite guardar datos en una variable dentro de alguna etiqueta, esto nos ayuda a tener referencias sobre el mismo documento. Esta propiedad se utiliza en este caso, para eliminar directamente guardando la llave primaria de cada tarea en el botón que nos aparece al lado de la tarea.
En la imagen anterior, se pueden ver tres rectángulos, el rojo encierra el mensaje de error, si se intenta registrar una tarea, pero al darle click no hay nada en el campo, el purpura o morado, es donde escribimos nuestra tarea y la guardamos, y en el azul nos cargara la lista de tareas que hallamos registrado en nuestra base de datos.
En la imagen anterior a este párrafo, podrán ver el mensaje de guardado con éxito al registrar la tarea, y la tarea en la lista al lado.
En la ultima imagen, podemos ver el mensaje cuando eliminamos una tarea, y la consulta automática ya previamente realizada para cargar la o las tareas aun que estén guardadas en la base de datos.
Bueno eso es todo, si alguna consulta no duden en escribir algún comentario, también dejare el proyecto para descargar desde GitHub.
Enlace del proyecto: Lista To-Do
