CSS, HTML und Javascript mit {stil}

Local Storage

Session Storage

Local Storage stellt persistenten 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 haltbar – Local Storage tatsächlich ist – lässt sich nicht voraussagen. Die Größe des lokalen Speichers hängt vom Browser ab, meist 5 bis 10 MB.

WebStorage-Objekte halten Benutzerdaten auf dem Client vor – 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 Web 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.

webstorage

Local Storage und Session Storage bilden keine Datenbank, sondern basieren auf einfachen Schlüssel-/Wertpaaren. Der Schlüssel (key) ist ein String.

Methoden für Local Storage

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()

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.

Die Formulardaten bleiben im HTML5 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.

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>