En este ejemplo vamos a crear una sencilla lista de tareas o lista to-do utilizando Web Storage para crear una aplicación que nos permite guardar nuestras tareas.
Estructura
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>To-Do</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="jumbotron text-center"> <h1>¿Qué tenés que hacer?</h1> <form role="form"> <div class="form-group"> <input type="text" id="txtNota" class="form-control"> </div> <select id="cboCategorias" class="form-control" onchange="cargarTareas()"> <option value="" selected="selected">Todas las categorías</option> <option>Personal</option> <option>Trabajo</option> <option>Estudio</option> </select> <button type="submit" class="btn btn-success btn-lg" onclick="guardarTarea()">Guardar</button> </form> </div> <div class="row"> <form role="form" id="tareas"> </form> </div> </div> <div id="tuweb"> Para ver más tutoriales <a href="http://www.tuweb.com">www.tuweb.com</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="scripts.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
En nuestro HTML tenemos un formulario que posee un Textbox y un Combo, con ello podremos escribir una tarea a realizar y asociarla a una de las tres categorías (personal, trabajo o estudio). Al hacer click en el botón llamaremos a una función JavaScript para guardar la tarea. Al cambiar el valor del combo de categorías llamaremos a una función que cargará todas las tareas de dicha categoría. Al final del documento hay otro formulario que es el lugar donde iremos poniendo las tareas que se fueron creando. CSS @media (min-width: 768px) { .container { max-width: 730px; } .jumbotron h1, .jumbotron .h1 { font-size: 50px; } } body { padding-top: 20px; padding-bottom: 20px; } .btn { margin-top: 20px; } #tareas { margin: 30px; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
onload = function () { // verificamos que el navegador soporte Web Storage if ('localStorage' in window && window['localStorage'] !== null) { cargarTareas(); } else { alert('Tu navegador no tiene soporte para Web Storage'); } } function guardarTarea() { // obtenemos la tarea y la categoría del formulario var categoria = document.getElementById("cboCategorias").value; var tarea = document.getElementById("txtNota").value; // si no se eligió ninguna categoría impedimos agregar la nota if (categoria == "") { alert("Por favor indique una categoría."); return false; } // impedimos agregar una tarea vacía if (tarea == "") { alert("Por favor ingrese una tarea a guardar"); return false; } // obtenemos la lista de quehaceres del Local Storage var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres')); // obtenemos la cantidad de elementos que tenemos guardados var cantidadElementos = almacenamiento.length; // almacenamos la nueva tarea almacenamiento[cantidadElementos] = categoria; almacenamiento[cantidadElementos + 1] = tarea; try { localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento)); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Se llegó al límite de almacenamiento'); } } // dejamos todo listo para ingresar una nueva tarea categoria = ""; cargarTareas(); limpiarNota(); return false; } function limpiarNota() { var tarea = document.getElementById("txtnota"); tarea.value = ''; } function cargarTareas() { // obtenemos la lista de quehaceres var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres')); // en caso que la lista no exista la creamos if (!almacenamiento) { almacenamiento = []; try { localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento)); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Se llegó al límite de almacenamiento'); } } } // obtenemos el formulario que posee todas las tareas ya ingresadas var tareas = document.getElementById("tareas"); // verificamos el filtro que está puesto var currentFilter = document.getElementById("cboCategorias").value; var checkBox = ""; // iteramos entre las notas agregadas for (var i = almacenamiento.length - 1; i >= 0; i = i - 2) { // sólo mostramos las notas del filtro aplicado if (currentFilter == almacenamiento[i - 1] || currentFilter == "") { // agregamos un checkbox con la nota y le agregamos una llamada a eliminarNota si se hace click checkBox += '<div class="checkbox">' + '<label>' + '<input type="checkbox" value="" onclick="eliminarNota(' + i + ')">' + almacenamiento[i] + ' (' + almacenamiento[i - 1] + ')' + '</label>' + '</div>'; } } // agregamos los checkboxes creados al formulario if (checkBox != undefined) { tareas.innerHTML = checkBox; } else { tareas.innerHTML = ""; } return false; } function eliminarNota(itemId) { // obtenemos la lista de elementos var almacenamiento = JSON.parse(localStorage.getItem('ListaQuehaceres')); // eliminamos la tarea y su categoría almacenamiento.splice(itemId - 1, 2); // volvemos a guardar la lista de quehaceres try { localStorage.setItem('ListaQuehaceres', JSON.stringify(almacenamiento)); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Se llegó al límite de almacenamiento'); } } cargarTareas(); } |
Estel código JavaScript, debe encargarse de guardar las tareas, mostrar las tareas filtradas por categoría, agregar las nuevas tareas a la página y permitir eliminar una tarea seleccionada.