Mit HTML5 kamen viele neue Features, beispielsweise das bessere Strukturieren von HTML-Seiten mittels neuer Tags, das Einbinden von Audio- und Video-Dateien ohne die Hilfe eines Flash Players, oder neue Formular Elementtypen wie z.B. date, email oder number. Dieses Tutorial beschreibt das HTML 5 Feature Local Storage, also lokale Speicherung. Damit sind aber nicht die guten alten Cookies gemeint. Aber was sind die Unterschiede von der lokalen Speicherungen zu den Keksen?
Ein kleiner Überblick:
- Im Gegensatz zu Cookies kann man mit Local Storage nicht nur 80KB speichern sondern mehrere Megabytes.
- Die gespeicherten Daten werden nicht wie Cookies immer mitgeschickt sind aber trotzdem immer vorhanden und abrufbar.
- Cookies laufen nach einer bestimmten Zeit ab, lokal gespeicherte Daten aber nicht.
- Mit Local Storage können Webapps wie zB. To-Do Listen, Einkaufszettel, Notizbücher etc. erstellt werden ohne dass die Daten auf einem Webserver gespeichert werden sondern beim Benutzer lokal gesichert werden.
Nutze den lokalen HTML5-Speicher, um Daten im Browser zu speichern und zu lesen. Lerne, wie du ganze Objekte speicherst und wie du Daten im Speicherobjekt manipulierst. In diesem Tutorial erfährst du alles über das Speichern von Daten auf der Client-Seite mit JavaScript.
Was ist der lokale HTML5-Speicher?
Mit der Eigenschaft HTML5 local storage kannst du Daten im Browser speichern und lesen. Sie ist Teil der HTML5 Web Storage API. Du kannst mindestens 5 MB Daten pro Ursprung speichern (bei manchen Browsern und Geräten auch mehr) und von allen Seiten aus auf sie zugreifen, und zwar clientseitig. Die Daten sind über alle Browser-Tabs hinweg zugänglich und bleiben auch nach dem Schließen des Fensters und sogar nach dem Schließen des Browsers erhalten. Sie bleiben so lange erhalten, bis sie explizit gelöscht werden.
Der lokale Speicher ist ideal, um unkritische Daten auf der Client-Seite zu speichern. Er ist einfach zu benutzen und leicht einzurichten. Du kannst ihn für einfache Website-Einstellungen, Online-Tools und sogar zum Speichern von Fortschritten in Webspielen verwenden. Denk daran, dass du den lokalen Speicher löschen kannst, indem du den Browser-Cache löschst. Wichtige Daten müssen also immer noch irgendwo außerhalb des Clients gespeichert werden.
Lokaler Speicher vs. Cookies
Wenn man an die Speicherung von Daten auf einer Webseite denkt, kommen einem oft Cookies in den Sinn. Es gibt einige große Unterschiede zwischen Cookies und der lokalen Speicherung:
- Cookies werden mit jeder Anfrage in den HTTP-Headern an den Server gesendet. Bei der lokalen Speicherung ist das nicht der Fall. Er hat also keine Auswirkungen auf die Leistung deiner Website.
- Die maximale Cookie-Größe beträgt etwa 4 KB, der lokale Speicher hat Platz für mindestens 5 MB Daten. (Je nach Browser und Gerät, auf dem die Seite läuft)
- Das Storage-Objekt bietet eine Reihe von Funktionen, mit denen du den lokalen Speicher leicht manipulieren kannst. Cookies werden als eine lange Zeichenkette gespeichert und du musst deinen eigenen Weg finden, mit den Daten auf intelligente und strukturierte Weise umzugehen.
- Wenn du auf der Client-Seite auf Daten zugreifen musst, ist die lokale Speicherung die beste Lösung. Sie bietet viele Vorteile gegenüber dem altmodischen Cookie.
Zugänglichkeit der Daten auf deiner gesamten Website
Das lokale Speicherobjekt ist nicht einfach überall auf deiner Website verfügbar. Es ist spezifisch für den Ursprung der Seite und folgt der same-origin policy. Jede Kombination aus Protokoll/Domäne/Port hat ihr eigenes lokales Speicherobjekt. So hat die http-Version deiner Website ein anderes lokales Speicherobjekt als die https-Version. Das Gleiche gilt für die Verwendung unterschiedlicher Ports oder Hosts (z. B. www oder no-www) auf deiner Website. Du kannst nicht auf die Daten zugreifen, die von der anderen Herkunft gespeichert wurden.
Hier ist ein Beispiel dafür, ob eine Seite für die fiktive URL https://wpfox.de/tutorial1 die Same-Origin-Richtlinie einhält:
- Ja: Gleicher Ursprung
https://wpfox.de/tutorial2 - Ja: Gleicher Ursprung
https://wpfox.de/javascript-tutorials/tutorial1 - Nein: Anderes Protokoll
http://wpfox.de/javascript-tutorials/tutorial2 - Nein: Anderer Host
https://wpfox.de/tutorial1 - Nein: Anderer Port
https://wpfox.de:81/javascript-tutorials/tutorial3
Daten speichern und lesen
Kommen wir nun zum praktischen Teil dieses Tutorials und nutzen wir den lokalen Speicher tatsächlich. Um Daten im lokalen Speicher zu bearbeiten, holst du dir zunächst das schreibgeschützte Storage Objekt aus der Eigenschaft window.localStorage. Du kannst in deinem JavaScript-Code überall darauf zugreifen, zum Beispiel so:
var localStorage = window.localStorage;Mit dieser Referenz kannst du den lokalen Speicher nutzen, um auf Daten zuzugreifen und sie zu lesen.
Um Daten im lokalen Speicher zu speichern, verwendest du einfach die Funktion setItem() für das Storage Objekt und übergibst einen Schlüssel und einen Wert. Wenn du einen neuen Schlüssel verwendest, wird ein neues Datenelement erstellt, wenn du einen vorhandenen Schlüssel verwendest, wird der vorherige Wert aktualisiert:
localStorage.setItem('myKey', 'myValue');Du kannst das Element wieder abrufen, indem du getItem() für das Speicherobjekt aufrufst und den Schlüssel als Argument übergibst. Die Funktion gibt den Wert zurück, der dem Schlüssel entspricht. Wenn der Eintrag nicht vorhanden ist, gibt die Funktion null zurück:
let myValue = localStorage.getItem('myKey');Wie prüfe ich, ob ein Schlüssel existiert?
Manchmal möchtest du wissen, ob ein Schlüssel im lokalen Speicher bereits existiert. Du kannst überprüfen, ob ein Datenelement im lokalen Speicher vorhanden ist, indem du getItem() aufrufst und den Namen des Schlüssels als Argument übergibst. Die Funktion gibt null zurück, wenn das Element nicht existiert.
Hier ist ein praktisches Beispiel, in dem ein Schlüssel auf seine Existenz geprüft wird:
if (localStorage.getItem('myKey') !== null {
//Data item existiert
} else {
//Data item existiert nicht
}Schleife über alle Schlüssel im Speicher
Manchmal möchtest du die Daten im lokalen Speicher lesen, kennst aber die genauen Schlüssel nicht. Mit der key()-Methode kannst du den Schlüsselnamen trotzdem ermitteln. Sie nimmt einen Index als Argument entgegen und gibt den Namen des Schlüssels zurück, der dem Index entspricht.
Kombiniere diese mit der Eigenschaft length des Storage-Objekts, um eine Schleife zu erstellen. Auf diese Weise kannst du eine Schleife über alle Datenelemente im lokalen Speicher ziehen und Daten lesen, ohne die genauen Schlüssel zu kennen.
Hier ist ein Beispiel:
let nextValue;
for (let i = 0; i < localStorage.length; i++) {
nextValue = localStorage.getItem(localStorage.key(i));
//mach etwas mit nextValue
}Den lokalen Speicher löschen
Wenn du Elemente aus dem lokalen Speicher entfernen möchtest, kannst du removeItem() verwenden, um ein einzelnes Element zu löschen. Du kannst sie aufrufen und einen Schlüssel als Argument übergeben. Wenn der Schlüssel nicht vorhanden ist, passiert nichts.
localStorage.removeItem('myKey');Wenn das nicht ausreicht und du den gesamten lokalen Speicher löschen willst, kannst du die Funktion clear() verwenden. Sie löscht alle Daten im lokalen Speicher und lässt das Objekt komplett leer:
localStorage.clear();Der localStorage bietet viele Vorteile gegenüber der Speicherung von Daten in Cookies. Er ist überall in deiner Anwendung verfügbar und bietet Möglichkeiten zum Hinzufügen, Suchen und Löschen von Daten. Du kannst damit sogar ganze JavaScript-Objekte speichern. Die Daten werden auf unbestimmte Zeit gespeichert, bis du den Browser-Cache löschst.
Abonniere das kostenlose KI-Update
Bleib auf dem Laufenden in Sachen Künstliche Intelligenz!
Melde Dich jetzt mit Deiner E-Mail-Adresse an und ich versorge Dich kostenlos mit News-Updates, Tools, Tipps und Empfehlungen aus den Bereichen Künstliche Intelligenz für dein Online Business, WordPress, SEO, Online-Marketing und vieles mehr.
Keine Sorge, ich mag Spam genauso wenig wie Du und gebe Deine Daten niemals weiter! Du bekommst höchstens einmal pro Woche eine E-Mail von mir. Versprochen.
