Actualizado el domingo, 19 junio, 2016
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
<!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>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
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.