Seguramente ya escuchaste sobre el almacenamiento local de HTML5. Ahora veremos como utilizar LocalStorage.
Primero tenemos que tener en cuenta que LocalStorage es el almacenamiento que no expira y tiene los siguientes métodos:
- getItem ( key )
- setItem ( key , value )
- removeItem ( key ).
La utilización de cada uno es muy simple, veamos el primero:
- getItem( key ) : Obtiene la información almacenada, se le pasa como parámetro una key que nosotros hayamos escogido al momento de guardarla, de esta manera logramos diferenciarla de las demás.
- setItem( key, value ) : Guardamos nuestra información deseada en una LocalStorage, se le pasa un key para identificarlas y un value, este value debe ser un String, esto es muy importante, una LocalStorage solo puede guardar String.
- removeItem( key ) : Para eliminar una LocalStorage se le debe pasar una key, la LocalStorage no tiene tiempo de vida, si no se elimina estará ahi guardada.
Un ejemplo de como utilizar estos métodos de LocalStorage sería así:
if (window.localStorage) {
//Agregamos un item
localStorage.setItem("nombre_app", "pepe");
//Obtenemos el item
var nombre = localStorage.getItem("nombre_app");
//Eliminamos el item
localStorage.removeItem("nombre_app");
}
else {
throw new Error('Tu Navegador no soporta LocalStorage :(');
}
Ahora te podrás preguntar, ¿Pero, que puedo hacer con esto? Pues, las posibilidades son infinitas, podrás hacer webapps, sitios web con personalizaciones, aplicaciones móviles, etc.
Veamos un ejemplo pequeño y práctico.
<body> <div class="container"> <h1>LocalStorage</h1> <form id="ingreso-notas" action="" method="post"> <ul class="list-unstyled"> <li> <label for="codigo">Código</label> <input type="text" id="codigo" name="name" /> </li> <li> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" /> </li> <li> <label for="nota">Nota</label> <input type="text" id="nota" name="nota" /> </li> <li> <input type="submit" class="btn btn-secondary" id="codigo" name="name" /> </li> </ul> </form> <ul class="list-inline box-style"> <li><button type="button" id="all" class="btn btn-primary">Ver Todo</button></li> </ul> <div id="result"></div> </div> <script src="js/jquery.js"></script> <script src="js/jquery.validate.min.js"></script> <script src="js/init.js"></script> </body>
En el código anterior creamos un formulario para almacenar registros de notas, el ejemplo es muy sencillo, creas un usuario, le asignas un código como id, un nombre y una nota, al enviar el formulario guardará la información como LocalStorage. Lo que haremos al procesar la información es que crearemos un JSON y antes de guardarlo lo convertiremos en un String, de esta manera podemos volverlo JSON y añadir o quitar registros.
/* Muestra el json en formato legible */
jQuery("#all").click(function(){
mostrar_json();
});
/* Delegamos la edición a los botones creados dinámicamente */
jQuery('body').delegate('.edit','click',function(){
var element = jQuery(this);
id = element.data('id');
editar_entrada(id);
});
/* Delegamos la eliminación a los botones creados dinámicamente */
jQuery('body').delegate('.delete','click',function(){
var element = jQuery(this);
id = element.data('id');
eliminar_entrada(id);
});
/* Agrega al json más items */
//Primero validamos utilizando el plugin Validate de jQuery
jQuery("#ingreso-notas").validate({
rules: {
codigo:{required : true},
nombre:{required : true, minlength : 3},
nota:{required : true, number : true}
},
messages: {
codigo: "Este campo es requerido",
nombre: "El nombre es requerido y debe tener por lo menos 3 caracteres",
nota: "La nota es requerido y debe tener solo dígitos",
},
submitHandler: function() {
//Obtenemos los datos del form
var codigo = jQuery('#codigo').val();
var nombre = jQuery('#nombre').val();
var nota = jQuery('#nota').val();
//Creamos el JSON
registro = {'codigo' : codigo, 'nombre' : nombre, 'nota' : nota};
//Agregamos el registro al LocalStorage
localStorage.setItem(codigo,JSON.stringify(registro));
//Mostramos el resultado en la tabla
mostrar_json();
jQuery("form").get(0).reset()
return false;
}
});
function editar_entrada(id){
var nota;
//Recorremos todos los datos de LocalStorage que tiene nuestro navegador
for(i = 0; i < localStorage.length; i++){
var registro = localStorage.key(i);
//Comparamos si es e que estamos buscando y lo agregamos al formulario para poder editarlo
if( registro == id ){
nota = $.parseJSON(localStorage.getItem(registro));
jQuery('#codigo').val(nota.codigo);
jQuery('#nombre').val(nota.nombre);
jQuery('#nota').val(nota.nota);
}
}
}
function eliminar_entrada(id){
localStorage.removeItem(id);
jQuery('#result').html('<div class="alert">Se eliminó la entrada</div>').fadeIn(800).delay(3000).fadeOut(800,function(){
mostrar_json();
});
}
//Mostramos los datos alamacenados en el LocalStorage
function mostrar_json(){
var table = '<table class="table table-striped">';
table += '<thead><tr>';
table += '<th>Código</th><th>Estudiante</th><th>Nota</th><th>Acciones</th>';
table += '</tr></thead><tbody>';
for(i = 0; i < localStorage.length; i++){
var registro = localStorage.key(i);
try {
nota = jQuery.parseJSON(localStorage.getItem(registro));
} catch(err) {
break;
}
table += '<tr>';
table += '<td>'+nota.codigo+'</td>';
table += '<td>'+nota.nombre+'</td>';
table += '<td>'+nota.nota+'</td>';
table += '<td><button type="button" class="btn btn-default edit" data-id="'+nota.codigo+'">Editar</button> <button type="button" class="btn btn-default delete" data-id="'+nota.codigo+'">Eliminar</button></td>';
table += '</tr>';
}
table += '</tbody></table>';
jQuery('#result').html(table);
jQuery('#result').css('display','block');
}
En el código anterior tenemos varias funciones, las cuales nos darán la interactividad, mostrar_json() nos mostrará la información almacenada en el LocalStorage. editar_entrada(id) nos ayuda a colocar la información correspondiente en el formulario para poder editarla. eliminar_entrada(id) nos elimina el ítem que hemos seleccionado de la tabla.
/* Delegamos la edición a los botones creados dinámicamente */
jQuery('body').delegate('.edit','click',function(){
var element = jQuery(this);
id = element.data('id');
editar_entrada(id);
});
Con este trozo de código le damos la facultad de poder editar a los botones agregados dinámicamente, por ello utilizamos la función delegate de jQuery, es lo mismo para la seccion de eliminar ítem o registro.
/* Delegamos la eliminación a los botones creados dinámicamente */
jQuery('body').delegate('.delete','click',function(){
var element = jQuery(this);
id = element.data('id');
eliminar_entrada(id);
});
Ahora, la parte final.
/* Agrega al json más items */
jQuery("#ingreso-notas").validate({
rules: {
codigo:{required : true},
nombre:{required : true, minlength : 3},
nota:{required : true, number : true}
},
messages: {
codigo: "Este campo es requerido",
nombre: "El nombre es requerido y debe tener por lo menos 3 caracteres",
nota: "La nota es requerido y debe tener solo digitos",
},
submitHandler: function() {
var codigo = jQuery('#codigo').val();
var nombre = jQuery('#nombre').val();
var nota = jQuery('#nota').val();
registro = {'codigo' : codigo, 'nombre' : nombre, 'nota' : nota};
localStorage.setItem(codigo,JSON.stringify(registro));
mostrar_json();
jQuery("form").get(0).reset()
return false;
}
});
Utilizamos un conocido plugin de jQuery para validar los campos del form, lo que nos interesa en este momento es en el método submitHandler, obtenemos la información del formulario, la convertimos a JSON y la agregamos al LocalStorage, mostramos la información actualizada en la tabla, limpiamos el formulario y ponemos un return false para que el formulario no recargue la página.
El ejemplo es sencillo y con él podemos ver en acción los 3 métodos de LocalStorage y un poco de JSON para facilitarnos las cosas. Esperamos que esto les ayude un poco a entender LocalStorage y a facilitarles el desarrollo de sus aplicaciones y sitios web.