Stellen Sie sich vor, Sie schreiben einen Task-Manager. Die Anwendung sollte nativ funktionieren: sowohl offline als auch online.
Grundkonzept
Unser Hauptwerkzeug beim Erstellen einer solchen Anwendung ist localstorage.
Ich kenne keine anderen Möglichkeiten, dies umzusetzen. Die Methode, über die ich Ihnen erzählen werde, wurde von mir selbst erfunden und schien mir erfolgreich zu sein.
Wie wird es funktionieren?
Wir haben also eine Liste von Aufgaben:
<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>
Wir müssen den Text der Aufgabe speichern und aktualisieren und der Status ist abgeschlossen / nicht abgeschlossen, und wir müssen auch das Hinzufügen einer neuen Aufgabe implementieren.
Wir generieren einen zufälligen Schlüssel für jede Aufgabe und verwenden ihn als Kennung für jede verwandte gespeicherte Information in localstorage. Analog sieht es aus wie eine Datenbank.
Wo soll ich anfangen?
Zunächst werden wir sehen, ob sich bereits Aufgaben im Speicher befinden. Alle Schlüssel werden in einer Zeile gespeichert
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
Wir werden uns bisher mit der Hinzufügung einer neuen Aufgabe befassen, um das Konzept der Speicherung und Verwendung gespeicherter Daten zu verstehen.
Wenn Sie auf Aufgabe hinzufügen klicken, wird eine Aufgabenvorlage in der Liste angezeigt. Der Aufgabentext kann bearbeitet werden. Jetzt müssen Sie das alles beschreiben.
Erstellen wir eine Funktion, die anhand der übertragenen Daten ein Element mit seinem Inhalt erstellt.
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; }
Wir beschreiben die Ereignisse für die Schaltfläche und für die Bearbeitung der Aufgabe:
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); });
Wir implementieren die fehlenden Funktionen updateEvent und 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); }
Großartig! Wir haben das Hinzufügen von Aufgaben und das Speichern in localStorage implementiert. Es bleibt die Aufgabe zu schließen, die bereits gespeichert wurde.
Gespeicherte Aufgabe ausgeben
Um die Aufgabe anzuzeigen, reicht es aus, alle Schlüssel abzurufen, zu analysieren, den Aufgabentext und seinen Status für jeden Schlüssel herauszuziehen. Als nächstes erstellen wir einfach jede Aufgabe in root: Wir rufen die Aufgabe mit getTemplate ab und fügen sie in root ein.
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); });
Im Allgemeinen ist unser einfachster Task-Manager bereit. Es bleibt alles auf einem Haufen zu sammeln.
Der Work Task Manager ist hier verfügbar .