Einführung
Das versehentliche Schließen einer Webseite beim Ausfüllen eines Formulars kann sehr ärgerlich sein. Alle eingegebenen Daten gehen verloren, und man muss von vorne beginnen. In diesem Artikel erfahren Sie, wie Sie mit `localStorage` in JavaScript Ihre Daten über die Browsersitzung hinaus speichern können. Wir zeigen Ihnen die Funktionsweise dieses Mechanismus und die `Window.localStorage`-Eigenschaft und wiederholen die Grundlagen der Webspeicherung in JavaScript.
Was ist LocalStorage in JavaScript?
localStorage ist eine Funktion, die es Websites und JavaScript-Anwendungen ermöglicht, Schlüssel-Wert-Paare ohne Ablaufdatum im Webbrowser zu speichern. Das bedeutet, dass die gespeicherten Daten auch dann erhalten bleiben, nachdem der Benutzer den Browser geschlossen oder den Computer neu gestartet hat.
localStorage ist eine Eigenschaft des window-Objekts, die es zu einem globalen Objekt macht, mit dem das Browserfenster interagieren und manipuliert werden kann. Es kann auch in Kombination mit anderen window-Eigenschaften und -Methoden verwendet werden.
Was ist Window.localStorage?
Der localStorage-Mechanismus ist über die Window.localStorage-Eigenschaft verfügbar. Window.localStorage ist Teil der Window-Schnittstelle in JavaScript und repräsentiert ein Fenster, das ein DOM-Dokument enthält.
Die Window-Schnittstelle verfügt über eine Vielzahl von Funktionen, Konstruktoren, Objekten und Namensräumen. Window.localStorage ist eine schreibgeschützte Eigenschaft, die eine Referenz auf das lokale Speicherobjekt zurückgibt, in dem Daten gespeichert werden, auf die nur die Ressource zugreifen kann, die es erstellt hat.
Wann sollte man localStorage verwenden?
Vereinfacht gesagt, dient localStorage zum Speichern und Abrufen von Daten. Zwar lassen sich damit kleine Datenmengen speichern, für große Datensätze ist es jedoch nicht geeignet. Da localStorage für jeden Benutzer des Geräts zugänglich ist, sollten Sie dort keine sensiblen Informationen speichern. Sie können es zum Speichern von Benutzereinstellungen wie Sprache oder Design verwenden. Bei häufigem Zugriff können Sie es auch zum Zwischenspeichern von Daten nutzen. Formulardaten bleiben in localStorage erhalten, selbst wenn der Benutzer den Browser schließt.
Wenn Ihre Anwendung eine Anmeldung erfordert, können Sie die Sitzungsdaten mithilfe von localStorage speichern. So können Sie sich auch nach dem Schließen und erneuten Öffnen des Browsers weiterhin anmelden. Wir werden dies später in diesem Tutorial anhand einer einfachen Anwendung demonstrieren.
Wo wird localStorage gespeichert?
In Google Chrome werden Web-Speicherdaten in einer SQLite-Datei in einem Unterordner des Benutzerprofils gespeichert. Dieser Unterordner befindet sich unter Windows unter \AppData\Local\Google\Chrome\User Data\Default\Local Storage und unter macOS unter ~/Library/Application Support/Google/Chrome/Default/Local Storage. Firefox speichert Speicherobjekte in einer SQLite-Datei namens webappsstore.sqlite, die sich ebenfalls im Benutzerprofilordner befindet.
Einführung in die Web Storage API
localStorage ist einer von zwei Mechanismen der Web Storage API; der andere ist sessionStorage. Die Web Storage API ist eine Reihe von Mechanismen, die es Browsern ermöglichen, Schlüssel-Wert-Paare zu speichern. Sie ist deutlich intuitiver als die Verwendung von Cookies.
Schlüssel-Wert-Paare repräsentieren Speicherobjekte, die Objekten ähneln, mit dem Unterschied, dass sie beim Laden von Seiten unverändert bleiben und immer Zeichenketten sind. Sie können auf diese Werte wie auf ein Objekt zugreifen oder die Methode `getItem()` verwenden (mehr dazu später).
sessionStorage vs. localStorage
Sowohl sessionStorage als auch localStorage verfügen über einen separaten Speicherbereich für jede Ressource, der für die Dauer der Seitensitzung verfügbar ist. Der Hauptunterschied besteht darin, dass sessionStorage nur einen einzigen Speicherbereich verwaltet, solange der Browser geöffnet ist (auch beim Neuladen oder Aktualisieren der Seite), während localStorage Daten auch nach dem Schließen des Browsers weiterhin speichert.
localStorage speichert Daten, die nicht ablaufen, während sessionStorage Daten nur für eine Sitzung speichert. Wichtig ist, dass localStorage-Daten, die in einer Inkognito-Browsersitzung geladen wurden, gelöscht werden, sobald der letzte private Tab geschlossen wird. Die Methode `setItem SessionStorage` ist nützlich, wenn Daten temporär gespeichert werden müssen, und sollte in Situationen verwendet werden, in denen die Daten nicht über die aktuelle Sitzung hinaus persistent gespeichert werden müssen.
SessionStorage bietet im Vergleich zu localStorage typischerweise geringere Speicherkapazitäten, oft nur wenige Megabyte pro Ressource. Dadurch eignet es sich zum Speichern temporärer Daten während einer Benutzersitzung, ohne zu viele Browserressourcen zu verbrauchen.
LocalStorage hingegen bietet eine größere Speicherkapazität, die häufig zwischen 5 und 10 MB pro Ursprung liegt. Es eignet sich zum Speichern größerer Datenmengen, die über mehrere Sitzungen hinweg erhalten bleiben müssen.
Vor- und Nachteile von LocalStorage
localStorage in JavaScript ist ein wichtiges Werkzeug zum Speichern clientseitiger Daten. Es hat jedoch einige Vor- und Nachteile, die Sie berücksichtigen sollten.
Vorteile
Der erste Vorteil von LocalStorage ist der, den wir bereits mehrfach erwähnt haben: Gespeicherte Daten verfallen nicht. Sie können auch offline auf die Daten zugreifen, und LocalStorage speichert Daten, die ohne Internetverbindung genutzt werden können.
Die Speicherung von Daten mit localStorage ist sicherer als die Speicherung mit Cookies, und Sie haben mehr Kontrolle über Ihre Daten. Außerdem bietet localStorage eine deutlich höhere Speicherkapazität als Cookies. Während Cookies nur vier Kilobyte Daten speichern können, sind in localStorage bis zu fünf Megabyte möglich.
Nachteile
localStorage arbeitet synchron, das heißt, jede Operation wird nacheinander ausgeführt. Bei kleineren Datensätzen ist das unproblematisch, kann aber mit zunehmender Datenmenge zu einem erheblichen Problem werden.
Obwohl LocalStorage sicherer als Cookies ist, sollten Sie darin keine sensiblen Daten speichern. Jeder, der Zugriff auf das Gerät des Nutzers hat, kann auf die in LocalStorage gespeicherten Daten zugreifen. Außerdem kann LocalStorage nur Zeichenketten speichern. Wenn Sie andere Datentypen speichern möchten, müssen Sie diese in Zeichenketten konvertieren. Schließlich kann das Speichern zu vieler Daten in LocalStorage Ihre Anwendung verlangsamen.
Wie funktioniert LocalStorage?
Sie haben es sicher schon oft gehört: localStorage speichert Daten. Und wenn Sie Daten speichern, bedeutet das, dass Sie diese möglicherweise später wieder benötigen. In diesem Abschnitt sehen wir uns genau an, wie localStorage funktioniert. Hier ist eine kurze Zusammenfassung:
- setItem(): Fügt Schlüssel und Wert zum localStorage hinzu.
- getItem(): Ruft Elemente aus dem localStorage ab.
- removeItem(): Entfernt ein Element aus dem localStorage.
- clear(): Löscht alle Daten aus dem localStorage.
- key(): Speichert eine Zahl, um den lokalen Schlüssel abzurufen
Daten mit setItem() speichern
Die Methode `setItem()` ermöglicht das Speichern von Werten im `localStorage`. Sie benötigt zwei Parameter: einen Schlüssel und einen Wert. Über den Schlüssel kann später auf den zugehörigen Wert zugegriffen werden. So sollte es aussehen:
localStorage.setItem('name', 'Obaseki Nosa');
Im obigen Code sehen Sie, dass „name“ der Schlüssel und „Obaseki Nosa“ der Wert ist. Wie bereits erwähnt, kann localStorage nur Zeichenketten speichern. Um Arrays oder Objekte in localStorage zu speichern, müssen Sie diese in Zeichenketten konvertieren.
Dazu verwenden wir die Methode JSON.stringify, bevor wir sie an setItem() übergeben, und zwar so:
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));Abrufen von Informationen mit getItem()
Mit getItem() können Sie auf Daten zugreifen, die im localStorage-Objekt des Browsers gespeichert sind. Diese Methode akzeptiert nur einen Parameter, den Schlüssel, und gibt den Wert als Zeichenkette zurück:
localStorage.getItem('name');
Dies gibt einen String mit dem Wert “Obaseki Nosa” zurück. Existiert der angegebene Schlüssel nicht im localStorage, wird null zurückgegeben. Im Falle eines Arrays verwenden wir die Methode JSON.parse(), die den JSON-String in ein JavaScript-Objekt umwandelt.
JSON.parse(localStorage.getItem('user'));
So rufen Sie das oben erstellte Array aus dem localStorage ab:
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);Diese Methode gibt das Array [“Obaseki”, 25] zurück. Sie können die Webseite untersuchen und es in der Konsole finden, etwa so:
Dieses Bild stammt von Firefox, daher sieht es in anderen Browsern etwas anders aus. Vergleichen wir es mit einem anderen Array, das nicht mit localStorage gespeichert wird:
const userArray2 = ["Oscar", 27];
console.log(userArray2);Nun sehen wir zwei Arrays in der Konsole, wie unten dargestellt:
Normalerweise verschwinden die entsprechenden Zeilen aus der Konsole, wenn Sie sie in Ihrem Code-Editor auskommentieren. Alles, was jedoch in localStorage gespeichert ist, bleibt erhalten. Hier ist ein Beispiel:
Daten mit removeItem() entfernen
Um ein Element aus dem localStorage zu entfernen, verwenden Sie die Methode `removeItem()`. Wenn der Schlüsselname übergeben wird, entfernt die Methode `removeItem()` den vorhandenen Schlüssel aus dem Speicher. Falls kein Element mit dem angegebenen Schlüssel verknüpft ist, hat die Methode keine Auswirkung. Hier ist der Code:
.localStorage.removeItem('name');
So löschen Sie alles im localStorage: clear()
Um alle Daten im localStorage zu löschen, verwenden Sie die Methode `clear()`. Diese Methode löscht beim Aufruf den gesamten Speicherplatz aller Datensätze für die jeweilige Domain. Sie benötigt keine Parameter. Verwenden Sie folgenden Code:
localStorage.clear();
So erhalten Sie den Namen eines Schlüssels: key()
Die Methode `key()` ist nützlich, wenn Sie die Schlüssel durchlaufen müssen, aber dennoch eine Zahl oder Liste an `localStorage` übergeben möchten, um den Schlüsselnamen abzurufen. So sieht das aus:
localStorage.key(index);Der Indexparameter repräsentiert den nullbasierten Index des Schlüssels, dessen Namen Sie abrufen möchten.
localStorage vs. Cookies
Sowohl LocalStorage als auch Cookies dienen der Speicherung clientseitiger Daten. Wie bereits erwähnt, können Cookies maximal vier Kilobyte Daten speichern, was deutlich weniger ist als die Speicherkapazität von fünf Megabyte von LocalStorage.
Cookies werden bei jeder HTTP-Anfrage automatisch an den Server gesendet, localStorage hingegen bleibt lokal auf dem Gerät des Nutzers. Dies kann die Web-Performance verbessern und erhöht den Netzwerkverkehr nicht, da keine Daten mit dem Server geteilt werden.
Wie wir gesehen haben, verfallen die in localStorage gespeicherten Daten nicht. Sie bleiben dort dauerhaft gespeichert, sofern sie nicht manuell gelöscht werden. Cookies hingegen können so eingestellt werden, dass sie nach einer bestimmten Zeit oder beim Schließen des Browsers ablaufen. Cookies speichern typischerweise Daten wie Benutzereinstellungen und Anmelde-/Authentifizierungsinformationen. Diese Daten sind über alle Browser-Tabs und -Fenster hinweg zugänglich. localStorage speichert hingegen nur Daten, die über ein bestimmtes Protokoll oder eine bestimmte Domäne zugänglich sind.
Browser-Unterstützung für localStorage
localStorage ist eine Art Webspeicher und Teil der HTML5-Spezifikation. Es wird von den meisten gängigen Browsern, einschließlich Internet Explorer v8, unterstützt. Mit dem folgenden Code-Snippet können Sie überprüfen, ob Ihr Browser localStorage unterstützt:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}Erweiterte Techniken zur Datenverwaltung im localStorage
Nun beschäftigen wir uns mit fortgeschrittenen Techniken zur Datenverwaltung im lokalen Speicher. Wir lernen, wie man Schlüssel effektiv löscht, bewährte Methoden zum Speichern und Organisieren von Objekten anwendet und komplexe Daten mithilfe von JSON-Parsing und -Stringifizierung verarbeitet.
Effektive Schlüsselentfernung
Das effiziente Entfernen von Schlüsseln aus Objekten im localStorage ist für die Optimierung des Speicherplatzes unerlässlich, insbesondere bei Anwendungen, in denen Daten häufig aktualisiert oder gelöscht werden. Durch das Entfernen unnötiger Schlüssel wird verhindert, dass sich im localStorage unnötige Daten ansammeln.
Um einen Schlüssel aus einem Objekt im localStorage effektiv zu entfernen, können Sie das Objekt mithilfe des Schlüssels abrufen, die gewünschte Eigenschaft entfernen und das aktualisierte Objekt anschließend wieder im localStorage speichern. Dadurch werden unnötige Datenmanipulationen und der Speicheraufwand minimiert.
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));Objekte speichern und organisieren
JSON-Parsing und -Stringifizierung sind leistungsstarke Techniken zur Verwaltung komplexer Datenstrukturen beim Speichern und Abrufen von Daten im localStorage. Sie ermöglichen die einfache Konvertierung zwischen JavaScript-Objekten und JSON-Strings und somit eine effiziente Datenverwaltung und -manipulation.
Beim Speichern komplexer Datenstrukturen wie Objekte oder Arrays im localStorage ist es unerlässlich, diese vor dem Speichern im localStorage mit JSON.stringify() in einen String umzuwandeln. Dadurch wird das JavaScript-Objekt in einen JSON-String konvertiert, der dann als Schlüssel-Wert-Paar gespeichert werden kann.
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));Beim Umgang mit verschachtelten Objekten oder Arrays muss sichergestellt werden, dass alle verschachtelten Objekte ebenfalls in Strings umgewandelt und analysiert werden, um die Integrität der Datenstruktur zu gewährleisten:
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));Ergebnis
In diesem Artikel haben wir die Möglichkeiten von LocalStorage in JavaScript als einfache und effiziente Methode zum Speichern und Abrufen von Daten ohne Cookies untersucht. Wir haben erklärt, wie und wann LocalStorage verwendet wird und wie Elemente darin gespeichert, abgerufen und gelöscht werden. Anhand eines praktischen Beispiels haben wir LocalStorage demonstriert und mit Cookies verglichen.
In diesem Beitrag haben Sie gelernt, wie und wann Sie localStorage verwenden. Wir haben erklärt, wie Sie Elemente in localStorage speichern, abrufen und löschen. Außerdem haben wir eine funktionierende Anwendung erstellt, um die Funktionsweise von localStorage in einem praktischen Szenario zu demonstrieren. Abschließend haben wir es mit Cookies verglichen.
Sie sind hier genau richtig! Wir bieten Ihnen ein großartiges, benutzerfreundliches Tool mit umfassender Browserunterstützung.
