La creación de una aplicación pendiente suele ser la primera aplicación que aprende a compilar en JavaScript, pero el problema con todas esas aplicaciones es que cuando recarga la página, todas esas tareas desaparecen.
Sin embargo, hay una solución simple, y eso es usar almacenamiento local. Lo bueno del almacenamiento local es que puedes guardar esos bits de datos en la computadora del usuario para que cuando vuelvan a cargar la página, todos sus tareas estén allí y el almacenamiento local sea bastante simple cuando se trata de guardar los datos y hacer está disponible en la página.
El almacenamiento local forma parte del almacenamiento web, que a su vez forma parte de la especificación HTML5. Hay dos opciones para almacenar datos en la especificación:
En términos simples, todo lo que hace el almacenamiento web es almacenar localmente los pares clave / valor nombrados y, a diferencia de las cookies, estos datos persisten incluso si cierra el navegador o apaga la computadora.
Si pensamos en una lista de cosas por hacer, lo que necesitaremos es:
Por lo tanto, nuestro HTML debería verse más o menos así:
Es un HTML de marcador de posición bastante estándar y con nuestro javascript podemos llenar todo esto con contenido dinámico.
Como usaremos jQuery en este ejemplo, también debe incluirlo en su documento HTML.
Si pensamos en la estructura de una aplicación sencilla, lo primero que debemos hacer es verificar cuando el usuario haga clic en el botón Agregar y verificar si la entrada tiene un valor vacío, como sigue:
$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}Todo lo que hicimos fue verificar que se haga clic en el botón Agregar y ejecutar una prueba simple para verificar si el usuario llenó la entrada con algo. De lo contrario, la div de alerta se desvanece y permanece durante 1000 ms y luego se desvanece. Finalmente devolvemos falso para que el navegador no lea el resto del script y aún así agregue el elemento de la lista.
Lo siguiente que debemos hacer es insertar un elemento de la lista con el valor en la entrada y lo antepondremos para que cuando el usuario agregue una tarea pendiente vaya siempre al principio de la lista y luego guarde ese elemento de la lista en almacenamiento local, así:
// add the list item$('#todos').prepend("" + Description + " ");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});Como puede ver, es bastante estándar jQuery y cuando se trata de almacenamiento local necesitamos guardar una clave y un valor. La clave es un nombre que nos hemos asignado a nosotros mismos y en este caso lo llamé 'todos' y luego necesitamos especificar qué queremos guardar, y en este caso ese es todo el HTML que se coloca dentro de la lista de todos desordenados. . Como puedes ver, acabamos de coger eso usando jQuery y finalmente devolvimos false para que el formulario no se envíe y nuestra página no se vuelva a cargar.
Nuestro siguiente paso es verificar si tenemos algo en el almacenamiento local ya guardado en nuestra máquina y, si lo hacemos, tenemos que colocarlo en la página, así que desde que le dimos a nuestra clave el nombre Todos necesitamos verificar su existencia de la siguiente manera:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}Usamos una declaración if simple para verificar y luego simplemente obtuvimos lo que tenemos en el almacenamiento local y lo colocamos como el HTML de la lista desordenada de la tarea pendiente.
Si prueba nuestra aplicación simple y volvemos a cargar la página vemos que ya está funcionando y todo lo que queda es crear la función para cuando el usuario elija borrar todas las tareas; cuando eso suceda, borraremos todo el almacenamiento local, volveremos a cargar la página para que nuestros cambios surtan efecto, y luego devolveremos el mensaje falso para evitar el hash al frente de la url, así:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});Una vez hecho esto, tenemos nuestra aplicación en pleno funcionamiento. El código completo se ve así:
$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;} $ ('# todos'). prepend (" "+ Descripción +" "); $ ('# formulario') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return falso;}); if (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# clear'). haga clic en (function () {window.localStorage.clear (); location.reload (); return false;}); El soporte para almacenamiento web es bastante bueno para una especificación HTML5; es compatible con todos los navegadores principales e incluso IE8, por lo que lo único que debe tener cuidado es IE7 si todavía lo admite.
El almacenamiento local en aplicaciones pequeñas como esta puede muy bien ser sustitutos de las bases de datos. Almacenar pequeñas cantidades de datos no necesita ser complejo.
¿Cómo se almacenan los datos de JavaScript? ¿Prefiere las cookies o las bases de datos al almacenamiento local? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de almacenamiento a través de Shutterstock.