localStorage – Speicher im Browser

Javascript Local Storage

Local Storage stellt Speicher ohne Ablaufdatum 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Benutzerdaten speichern

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). 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 Browsern unterstützt.

Im Gegensatz zu SessionStorage kann LocalStorage (genauso wie Cookies) den Kontext über mehrere Fenster aufrecht erhalten.

LocalStorage vs SessionStorage vs Cookies
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
// nur IE
localStorage.remainingSpace()

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

localStorage kurz und bündig

Für alle Liebhaber von Pastelltönen: Farbe der Überschriften ändern

Die einfache Notation reicht schon zum Setzen des Keys.

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

Und einmal eine neue Farbe für die Überschriften auf dieser Seite gewählt, bleibt die Farbe, auch wenn das Browserfenster geschlossen und die Seite später noch einmal aufgerufen wird.

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>

Arrays in localStorage speichern

localStorage unterstützt nur Strings. Mit JSON.stringify () und JSON.parse () kann localStorage auch Arrays und Objekte komfortabel unterbringen.

var arr = [[1,2,3],["eBike","Fahrrad","Bus","Bahn"]];   // Mehrdimensionales Array
console.log (arr);

var json = JSON.stringify (arr);                         // Array in String umwandeln
console.log (json);
localStorage.setItem ("complex", json);                  // String in localStorage speichern

var com = JSON.parse (localStorage.getItem ("complex")); // Auslesen 
console.log (com);

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 kürzer mit forEach

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

Wann wird 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, sondern bleiben Privatsache des Benutzers. 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.