Speichern der Benutzerdaten nach dem Neuladen der Seite

Stellen Sie sich vor, Sie schreiben einen Task-Manager. Die Anwendung sollte als Muttersprache funktionieren: offline und online arbeiten.


Grundkonzept


Unser Hauptwerkzeug beim Erstellen einer solchen Anwendung ist Localstorage.


Mit anderen Möglichkeiten, dies zu realisieren, bin ich nicht vertraut. Die Art, über die ich erzählen werde, habe ich mir ausgedacht und es schien mir gelungen zu sein.


Wie wird das 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 und den Status abgeschlossen / nicht speichern und aktualisieren sowie das Hinzufügen einer neuen Aufgabe implementieren.


Wir generieren für jede Aufgabe einen Zufallsschlüssel und verwenden ihn als Kennung für jede zugeordnete gespeicherte Information im lokalen Speicher. Analog dazu ist es ähnlich wie bei Datenbanken.


Wo soll ich anfangen?


Zunächst werden wir prüfen, 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(', ');
  // ...
}

Lassen Sie uns zunächst das Hinzufügen einer neuen Aufgabe verstehen, um das Konzept des Speicherns und der Verwendung gespeicherter Daten zu verstehen.


Wenn Sie auf eine Aufgabe hinzufügen klicken, erscheint eine Vorlagenaufgabe in der Liste. Der Aufgabentext kann bearbeitet werden. Neper muss das alles beschreiben.


Erstellen Sie eine Funktion, die ein Element mit den darin enthaltenen Daten 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);
});

Implementieren Sie 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 einer Aufgabe implementiert und in localStorage gespeichert. Es müssen noch die bereits gespeicherten Aufgaben abgeschlossen werden.


Gespeicherte Aufgaben ausgeben


Um Aufgaben anzuzeigen, genügt es, alle Schlüssel abzurufen, zu analysieren, den Text der Aufgabe und ihren Status für jeden Schlüssel zu extrahieren. Dann erstellen Sie einfach jede Aufgabe in root: Wir erhalten eine Aufgabe mit getTemplate 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 einfacher Taskmanager bereit. Es bleibt alles zu sammeln.


Arbeitsaufgabenmanager ist als Referenz verfügbar .


Jetzt auch beliebt: