Web Storage

Siehe auch Dive into Html 5 / Webstorage
Siehe auch w3schools Web Storage Referenz
Siehe auch meinen Tipp Webstorage Javascript

Mit Web Storage wurde eine neue Möglichkeit geschaffen, Daten auf dem User Rechner zu speichern. Eine Alternative zu Cookies, welche in der Regel mit PHP programmiert wurden. Web Storage ist jedoch sicher und schnell und man kann größere Datenmengen ohne Performance Verlust abspeichern (bis zu 5 MB).

Die Daten werden nach dem Schema Name / Wert gespeichert. Eine Website kann nur die Daten abrufen, die sie selbst gespeichert hat. Die Daten werden nicht erst an den Server geschickt, sondern direkt über den Browser gespeichert und abgerufen.

Wozu braucht man das?

Generell braucht man es immer wenn man Variablen / Werte über mehrere Seiten hinweg abspeichern und abrufen will. Die Variablen können eine unbegrenzte Lebensdauer haben, oder nur innerhalb einer Session Gültigkeit haben.

• Ich habe weiter unten ein Beispiel mit einem aufklappbaren Hauptmenü programmiert. Der Zustand wird gespeichert und auf jeder Seite entsprechend angezeigt. Auch andere Usereinstellungen sind denkbar wie Hintergrundmusik, Schriftgröße, Farbgebung etc.
• Der User könnte in einem Shop, Waren in einen Warenkorb ablegen, ohne sich angemeldet zu haben. Erst wenn er bestellt und sich anmeldet, könnten diese zwischengespeicherten Daten in die eigentliche Datenbank übertragen werden.
• Man könnte die Anzahl der Besuche einer Website abspeichern und dementsprechend andere Inhalte anbieten.

Web Storage Objects

Es gibt 2 Arten Daten zu speichern:

window.localStorage

Die Daten werden ohne Ablaufdatum abgespeichert

window.sessionStorage

Die Daten werden für eine Session gespeichert. Das bedeutet, dass nach Schließen des Tabs oder Browserfenster die Daten gelöscht werden.

Ob der Browser die Web Storage unterstützt, kann man mit folgender if- Struktur innerhalb eines Script Bereichs überprüfen.

if(typeof(Storage) !== "undefined") {
    // Code für localStorage/sessionStorage.
}  	else {
    // Sorry! Keine Web Storage Unterstützung..
} 

Local Storage / window.localStorage

Wie anfangs erwähnt, kann man mit dem localStorage Objekt Daten dauerhaft speichern. Die Werte werden immer als Strings (Zeichenketten in Anführungszeichen) gespeichert. Man muss sie dann bei Bedarf umwandeln. Mit folgenden Funktionen werden die Daten gespeichert und abgerufen.

Speichern:

localStorage.setItem("soundOn", "true");

Abrufen:

document.getElementById("result").innerHtml = localStorage.getItem("soundOn");

Für dieses Beispiel ist auch eine alternative Schreibweise möglich:

localStorage.soundOn = "true";
document.getElementById("result").innerHtml = localStorage.soundOn;

Erklärung

Mit der ersten Funktion wird ein localStorage Objekt erzeugt und die Variable soundOn mit dem Wert true hinterlegt. Unter Abrufen wird mittels localStorage.getItem("soundOn") oder in der alternativen Schreibweise mit localStorage.soundOn dieser hinterlegte Wert abgerufen. Dieser Wert wird in den Gültigkeitsbereich eines HTML Elements mit der id="result" geschrieben. Siehe dazu auch meine Javascript Tipps zum Thema.

Vorhandensein einer Variablen überprüfen

Folgendermaßen kann man überprüfen, ob eine Variable namens"counter" schon vorhanden ist.

if(localStorage.counter){/*weitere Anweisungen*/}

---

Beispiel Counter

Hier werden Seitenaufrufe gespeichert und abgerufen Beispiel

Ein Beispiel, welches die Seitenaufrufe speichert. Beispiel

Beispiel Menü

Hier gibt es ein Menü, das aufgeklappt oder geschlossen ist. Der Zustand wird gespeichert und zugewiesen. Beispiel

Zum Vergleich gibt es hier noch ein paar einfachere Beispiele ohne WebStorage.

Beispiel Hintergrundsound

Hier geht es darum eine Hintergrundmusik automatisch abzuspielen oder nicht. Der User stellt generell eine Autoplay Funktion ein.
Beispiel 1

In diesem Beispiel wird mittels dem Standardplayer der Sound vom User gesteuert. So hat er die Möglichkeit die Lautstärke einzustellen oder den Abspielknopf zu verschieben. Auch hier wird gespeichert und beim Laden aufgerufen, ob die Musik abspielt oder nicht.
Beispiel 2

In diesem Beispiel wird auch die eingestellte Lautstärke abgespeichert.
Beispiel 3

Session Storage / window.sessionStorage

Die Anwendung des Session Storage Objekts unterscheidet sich nicht wesentlich von der Benutzung des Local Storage Objektes. Der Unterschied ist ledliglich der, dass die Daten des Session Storage Objekts nach Beendigung der Session gelöscht werden.

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Sie haben den Button" +
sessionStorage.clickcount + " mal in dieser Session angeklickt.";