Imagina que estás escribiendo un administrador de tareas. La aplicación debería funcionar como nativa: trabajar fuera de línea y en línea.
Concepto basico
Nuestra herramienta principal para crear una aplicación de este tipo es el almacenamiento local.
No estoy familiarizado con otras formas de implementar esto. El método que les contaré fue inventado por mí mismo y me pareció exitoso.
¿Cómo va a funcionar?
Entonces, tenemos una lista de tareas:
<ul class="tasks"> <li class="task"> <p class="task__text" contenteditable="true">Eggs</p> <input type="checkbox"> </li> <li class="task"> <p class="task__text" contenteditable="true">Breads</p> <input type="checkbox"> </li> </ul> <button class="task__add-btn" type="button">New task</button>
Necesitamos almacenar y actualizar el texto de la tarea y el estado se completa / no, y también implementar la adición de una nueva tarea.
Generaremos una clave aleatoria para cada tarea y la usaremos como un identificador para cada información almacenada relacionada en el almacenamiento local. Por analogía, parece una base de datos.
Por donde empezar
En primer lugar, veremos si ya hay tareas en la memoria. Todas las claves se almacenarán en una línea.
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
Nos ocuparemos de la adición de una nueva tarea hasta ahora para comprender el concepto de almacenamiento y uso de datos almacenados.
Cuando hace clic en agregar una tarea, aparecerá una plantilla de tarea en la lista, el texto de la tarea se puede editar. Ahora necesitas describir todo esto.
Creemos una función que cree un elemento con su contenido utilizando los datos que se le transfieren.
function getTemplate(token, data) { const task = document.createElement('li'); task.classList.add('task'); task.setAttribute('data-token', token); task.innerHTML = ` <p class="task__text" contenteditable="true">${data.text}</p> <input type="checkbox" ${data.input == 'true' ? 'checked' : ''}> `; return task; }
Describimos los eventos para el botón y para editar la tarea:
const btnAddTask = document.querySelector('.task__add-btn'); btnAddTask.addEventListener('click', function(e) { e.preventDefault(); const newToken = randomToken(); tokens.push(newToken); const taskData = { text: 'Task`s title', input: false }; root.appendChild(getTemplate(newToken, taskData)); updateTokens(); updateEvent(newToken); });
Implementamos las funciones que faltan updateEvent y randomToken.
function updateEvent(token) { const task = root.querySelector(`[data-token="${token}"]`); const text = task.querySelector(`.task__text`); const input = task.querySelector(`input`); localStorage.setItem(`text-${token}`, text.innerHTML); localStorage.setItem(`input-${token}`, input.checked); text.addEventListener('input', function() { localStorage.setItem(`text-${token}`, text.innerHTML); }); input.addEventListener('click', function() { localStorage.setItem(`input-${token}`, input.checked); }); } function updateTokens() { localStorage.setItem('tokens', tokens.join(', ')); } function randomToken() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); }
Genial Implementamos agregar tareas y guardarlas en localStorage. Queda por concluir la tarea que ya se ha guardado.
Salida de tarea guardada
Para mostrar la tarea, es suficiente obtener todas las claves, analizarlas, extraer el texto de la tarea y su estado para cada clave. Luego, simplemente creamos cada tarea en la raíz: obtenemos la tarea usando getTemplate y la pegamos en la raíz.
tokens.forEach(function(token) { const text = localStorage.getItem(`text-${token}`); const input = localStorage.getItem(`input-${token}`); root.appendChild(getTemplate(token, { text: text, input: input })); updateEvent(token); });
En general, nuestro administrador de tareas más simple está listo. Queda por recoger todo en un montón.
Work Task Manager está disponible aquí .