Daten Speicherung und Abruf

Einführung

In diesem Lab begleiten wir Alex, einen entschlossenen Webdesigner in einem hektischen Tech-Startup, der nun in das Gebiet der Datenpersistenz eintaucht. Nachdem er erfolgreich einen Mechanismus zur Verfolgung und Darstellung von Finanzaufzeichnungen im persönlichen Finanztracker geschaffen hat, ist die nächste Herausforderung, sicherzustellen, dass diese Aufzeichnungen über Browser-Sitzungen hinweg bestehen. Das Ziel ist es, Nutzern zu ermöglichen, zur App zurückzukehren und alle zuvor eingegebenen Daten unversehrt zu finden, was die Benutzerfreundlichkeit und die Nutzerzufriedenheit der App erhöht. Diese Aufgabe führt Alex zum Konzept des Web-Speichers, insbesondere zur Nutzung der localStorage-API zum Speichern und Abrufen des App-Zustands.

In diesem Lab lernen Sie, wie Sie localStorage verwenden, um Daten lokal im Browser des Benutzers zu speichern und so Datenpersistenz in Webanwendungen zu gewährleisten.

Wissenspunkte:

• localStorage-Verwendung
• JSON-Serialisierung und -Deserialisierung (JSON.stringify, JSON.parse)

Skills Graph

LocalStorage

localStorage bietet einen Mechanismus, um Sitzungsdaten auf der Client-Seite zu speichern, wobei die Speichergrenzen normalerweise bei etwa 5 MB liegen. Anders als die Sitzungsspeicherung (sessionStorage) verschwinden die Daten in localStorage nicht, wenn die Sitzung endet.

Daten speichern

Die setItem()-Methode ermöglicht es Ihnen, Daten in localStorage zu speichern. Diese Methode nimmt zwei Parameter: einen Schlüssel und einen Wert.

Beispiel:

localStorage.setItem("username", "Alice");

Daten abrufen

Die getItem()-Methode wird verwendet, um Daten aus localStorage zu lesen. Diese Methode nimmt einen Parameter: den Schlüssel.

Beispiel:

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Ausgabe: Alice

Aufzeichnungen in LocalStorage speichern

In diesem Schritt arbeiten Sie mit Alex zusammen, um eine Funktionalität zu implementieren, die die Finanzaufzeichnungen-Array每当 eine neue Aufzeichnung hinzugefügt wird, in localStorage speichert. Dadurch wird sichergestellt, dass die Daten des Benutzers lokal auf ihrem Gerät gespeichert werden und auch nach Schließen oder Neuladen des Browsers verfügbar sind.

Am Anfang von script.js, bevor die addFinancialRecord-Funktion definiert wird, fügen Sie folgenden Code hinzu, um gespeicherte Aufzeichnungen aus localStorage zu laden und das financialRecords-Array zu initialisieren:

Ändern Sie script.js, um Aufzeichnungen aus localStorage zu laden:

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

• Die statische Methode JSON.parse() analysiert einen JSON-String und konstruiert den von dem String beschriebenen JavaScript-Wert oder -Objekt. Eine optionale Reviver-Funktion kann angegeben werden, um eine Transformation auf das resultierende Objekt durchzuführen, bevor es zurückgegeben wird.

Implementiere die Aufzeichnungspersistenz

Füge die Logik hinzu, um die Aufzeichnung in localStorage im addRecord-Funktion zu speichern:

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

  const addRecord = (description, amount, type) => {
    records.push({ description, amount, type });
    saveRecords();
  };
});

Jetzt wird jede neue Finanzaufzeichnung, die hinzugefügt wird, in localStorage gespeichert, was die Datenpersistenz gewährleistet.

Als Nächstes müssen wir die Löschfunktion der Buchhaltung implementieren. Bevor wir die Löschfunktion schreiben, müssen wir eine neue Array-Operationsmethode lernen.

Splice-Methode

Die splice()-Methode kann drei Parameter akzeptieren: die Startposition, die Anzahl der zu löschenden Elemente und die neuen Elemente, die hinzugefügt werden sollen.

Syntax:

array.splice(start, deleteCount, item1, item2,...)

• start: Der Index, ab dem das Array geändert werden soll.
• deleteCount: Die Anzahl der zu entfernenden Elemente. Wenn keine Elemente entfernt werden sollen, sollte dies 0 sein.
• item1, item2,...: Neue Elemente, die zum Array hinzugefügt werden sollen.

Elemente entfernen

Um Elemente aus einem Array zu entfernen, legen Sie den deleteCount-Parameter fest, ohne neue Elemente hinzuzufügen.

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // Entferne 2 Elemente, beginnend am Index 1
console.log(fruits); // Ausgabe: ['Apple', 'Date']

Elemente hinzufügen

splice() kann auch Elemente an einer bestimmten Position im Array hinzufügen, ohne Elemente zu entfernen. Setzen Sie deleteCount auf 0 und geben Sie die Elemente an, die hinzugefügt werden sollen.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // Füge 'Date' am Index 2 hinzu
console.log(fruits); // Ausgabe: ['Apple', 'Banana', 'Date', 'Cherry']

Elemente ersetzen

Indem Sie deleteCount setzen und neue Elemente hinzufügen, kann splice() sowohl Elemente entfernen als auch hinzufügen und so effektiv ersetzen.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // Ersetze 1 Element am Index 1 mit 'Date'
console.log(fruits); // Ausgabe: ['Apple', 'Date', 'Cherry']

Füge die Möglichkeit hinzu, Aufzeichnungen zu löschen

Füge die Möglichkeit hinzu, Aufzeichnungen zu löschen.

Schreiben Sie folgenden Code in die script.js-Datei:

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

Zusammenfassung

In diesem Lab haben Sie und Alex die Herausforderung der Datenpersistenz in der persönlichen Finanztracker-Anwendung bewältigt. Indem Sie gelernt haben, die localStorage-API zu verwenden, haben Sie es ermöglicht, dass die Anwendung Finanzaufzeichnungen über Browser-Sitzungen hinweg speichert und abruft, was die Benutzererfahrung erheblich verbessert. Diese Einführung in das Web-Storage eröffnet neue Möglichkeiten für das Erstellen von komplexeren und benutzerfreundlicheren Webanwendungen.

Durch praktische Übungen haben Sie gesehen, wie Daten mithilfe von JSON.stringify in ein Stringformat serialisiert werden können für die Speicherung und dann mithilfe von JSON.parse wieder in JavaScript-Objekte deserialisiert werden können für das Abrufen. Dieser Prozess ist entscheidend für das Verwalten des Anwendungsstatus in der Client-seitigen Webentwicklung und bildet eine Grundkenntnis, die Ihnen bei Ihren zukünftigen Webentwicklungsprojekten helfen wird.