Imaginez que vous écrivez un gestionnaire de tâches. L'application doit fonctionner en natif: travailler hors ligne et en ligne.
Concept de base
Notre principal outil pour créer une telle application est le stockage local.
Je ne connais pas d'autres façons de mettre en œuvre cela. La méthode dont je vais vous parler a été inventée par moi-même et elle m'a paru réussie.
Comment ça va fonctionner?
Nous avons donc une liste de tâches:
<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>
Nous devons stocker et mettre à jour le texte de la tâche et le statut est terminé / non, et également implémenter l'ajout d'une nouvelle tâche.
Nous allons générer une clé aléatoire pour chaque tâche et l'utiliser comme identifiant pour chaque information stockée associée dans le stockage local. Par analogie, cela ressemble à une base de données.
Par oĂą commencer?
Tout d'abord, nous verrons s'il y a déjà des tâches en mémoire. Toutes les clés seront stockées sur une seule ligne
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
Nous traiterons de l'ajout d'une nouvelle tâche jusqu'à présent pour comprendre le concept de stockage et d'utilisation des données stockées.
Lorsque vous cliquez sur ajouter une tâche, un modèle de tâche apparaît dans la liste, le texte de la tâche peut être modifié. Maintenant, vous devez décrire tout cela.
Créons une fonction qui crée un élément avec son contenu en utilisant les données qui lui sont transférées.
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; }
Nous décrivons les événements du bouton et de l'édition de la tâche:
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); });
Nous implémentons les fonctions manquantes updateEvent et 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); }
Super! Nous avons implémenté l'ajout de tâches et leur sauvegarde dans localStorage. Reste à conclure la tâche déjà enregistrée.
Sortie de la tâche enregistrée
Pour afficher la tâche, il suffit d'obtenir toutes les clés, de les analyser, de retirer le texte de la tâche et son état pour chaque clé. Ensuite, nous créons simplement chaque tâche en root: nous obtenons la tâche en utilisant getTemplate et la collons dans root.
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 général, notre gestionnaire de tâches le plus simple est prêt. Il reste à tout rassembler en tas.
Work Task Manager est disponible ici .