Local Storage – Speicher im Browser

Local Storage: Speicher im Browser ähnlich wie Cookies

Local Storage stellt persistenten (haltbaren) Speicher im Browser des Benutzers zur Verfügung – z.B. um ein einfaches Umschalten der Sprache bei mehrsprachigen Seiten zu realisieren.

Wie persistent – also wie dauerhaft – Local Storage tatsächlich ausfällt, lässt sich nicht voraussagen. Die Größe des lokalen Speichers hängt vom Browser ab, meist sind es 5 bis 10 MB (aber das ist eine Ansage aus der Glaskugel).

Benutzerdaten speichern

WebStorage-Objekte speichern Benutzerdaten im Client (dem Browser) – entweder für die Dauer der Session (Session Storage) oder ohne definiertes Ende (Local Storage). Die User-Daten werden nicht mehr wie Cookies mit jedem HTTP-Request auf den Server übertragen, sondern vom Browser des Benutzers gespeichert. Local Storage und Session Storage werden von allen modernen Browsern unterstützt – inkl. IE 8.

Im Gegensatz zu Session Storage kann Local Storage (genauso wie Cookies) den Kontext über mehrere Fenster aufrecht erhalten.

Drei Arten Webstorage: Local Storage (hält lange, aber nicht ewig), Session Storage (hält eine Session lang), Cookies haben ein Ablaufdatum

Local Storage und Session Storage bilden keine Datenbank, sondern basieren auf einfachen Schlüssel-/Wertpaaren. Der Schlüssel (key) ist ein String. Das macht den Umgang mit localStorage und sessionStorage so schön einfach gegenüber Cookies. Während wir bei Cookies den Cookie-String in mühevoller Kleinarbeit auflösen müssen, halten localStorage und sessionStorage Schlüssel für den direkten Zugriff bereit.

Local Storage setItem, getItem, removeItem

Die Verarbeitung von Local Storage und Session Storage ist dieselbe – nur das Objekt unterscheidet Local Storage von Session Storage. localStorage und sessionStorage sind Objekte von window.

// erzeugt einen Eintrag oder überschreibt den Eintrag 
// ohne Warnung, wenn der key schon existiert
localStorage.setItem(key, value)

//gibt null zurück, wenn der key nicht existiert
localStorage.getItem(key)

//löscht einen Eintrag
localStorage.removeItem(key)

// Verfügbarer Speicherplatz für das Storage-Objekt
// leider nur IE
localStorage.remainingSpace()

//löscht den Speicher
localStorage.clear()

localStorage kurz und bündig

Für alle Liebhaber von Pastelltönen.

Die einfache Notation reicht schon zum Setzen des Keys.

// Wert setzen
localStorage[ "'"favorite"'" ] = color;
// Wert anzeigen
if (localStorage["favorite"] != null) {
   console.log( localStorage[ "favorite" ] );
}

Local Storage Datentyp

Die Werte können beliebige Datentypen vom String über Boolean, Integer oder Float sein, werden aber in allen Fällen als String gespeichert. Damit gespeicherte Zahlen wieder als Zahlen behandelt werden, müssen sie mit parseInt() oder parseFloat() in die Welt der Zahlen zurück geholt werden.

Spieler
Punkte
Verein

Werte übernehmen überträgt die Formulareingaben in die Tabelle darunter. Bei einem erneuten Laden der Seite (auch wenn der Browser zwischenzeitlich geschlossen wurde) holt Reload die Daten aus dem Local Storage zurück und überträgt sie auch in das Formular.

Da sich das Skript nicht um die Verwaltung der Benutzer kümmern muss, ist die Implementierung außerordentlich einfach.

localStorage.setItem überträgt Werte in den LocalStorage und localStorage.getItem liest die Werte aus dem Local Storage.

<form action="#" method="post" id="webstorage">
   <input type="text" id="myKey" value="" />
   …
   <input type="submit" id="submit" value="Werte übernehmen" />
</form>

<script type="text/javascript">
localStorage.setItem('aField',document.getElementById('myKey').value);
</script>

Alle localStorage-Keys auslesen

for (let i=0, iC=localStorage.length; i<iC; ++i) { 
    let storageKey = localStorage.key(i);
    console.log(storageKey + ' : ' + localStorage.getItem(storageKey) );
}

Quelle How can I get a list of the items stored in html 5 local storage from javascript?

oder noch kürzer

let keys = Object.keys(localStorage);
keys.forEach(function(key){
    console.log(key + " : " + localStorage.getItem(key));
});

Wann wir localStorage gelöscht?

Die Daten bleiben im Local Storage gespeichert, auch wenn der Benutzer das Browserfenster oder den Browser schließt und können zu jeder Zeit wieder abgerufen werden. Die Werte werden nicht wie bei HTTP-Cookies auf den Server übertragen. Die gespeicherten Daten haben kein Ablaufdatum.

Die Browser sind angehalten, den Speicher nur aus Sicherheitsgründen zu löschen oder wenn der Benutzer die Daten löscht.

Local Storage: Speicher im Browser local storage Local Storage Session Storage Cookies