Web Storage

von Marian Horst

Was ist Web Storage?

Eine Technik für Webanwendungen, mit der Daten in einem Webbrowser gespeichert werden.

Web Storage bietet dabei die Möglichkeit, Daten lokal oder Session-spezifisch zu speichern.

Warum Web Storage nutzen?

HTML-Seiten haben kein Gedächtnis und sind somit zustandslos.

Web Storage verleiht Webseiten ein Gedächtnis und bietet dafür wesentlich mehr Platz im Browser des Benutzers als Cookies.

Web Storage vs. Cookies

Web Storage ist im Browser integriert, wodurch speichern, ändern und löschen von Daten auch offline möglich ist.

Die Daten werden nicht wie bei Cookies auf den Server übertragen, sondern auf dem System des Benutzers gespeichert.

Cookies sind auf 4 KB beschränkt, Web Storage zischen 5 und 10 MB Speicher Verfügung stellen.

Locale Speicherung

Local Storage ist ein persistenter Speicher.

Daten bleiben bestehen, wenn die Seite oder der Browser geschlossen werden.

Die Daten sind mit einer Domain und dem lokalen Benutzerprofil des Zugriffsrechners verknüpft.

Cookies werden bei jeder Anfrage im Header mitgesendet, was zusätzlich Traffic produziert.

Session-spezifische Speicherung

Session Storage ist nicht persistent

Dieser überlebt nur, bis die Anwendung oder Seite geschlossen wird.

Die Daten sind mit dem Browser-Fenster verknüpft und auf dieses beschränkt.

Ein Reload der Seite ist möglich, ohne die Daten zu verlieren

JavaScript-Funktionen

für Local Storage

localStorage.setItem('key', 'value');
//Speichert einen Wert mit dem dazugehörigen Schlüssel.

localStorage.getItem('key');
//Gibt den Wert des dazugehörigen Schlüssels zurück. 

localStorage.removeItem('key');
//Löscht den kompletten Datensatz des dazugehörigen Schlüssels.

localStorage.clear();
//Löscht alle Daten aus dem lokalen Speicher.

JavaScript-Funktionen

für Session Storage

sessionStorage.setItem('key', 'value');
//Speichert einen Wert mit dem dazugehörigen Schlüssel.

sessionStorage.getItem('key');
//Gibt den Wert des dazugehörigen Schlüssels zurück. 

sessionStorage.removeItem('key');
//Löscht den kompletten Datensatz des dazugehörigen Schlüssels.

sessionStorage.clear();
//Löscht alle Daten aus dem lokalen Speicher.

Beispiel Local Storage

Beispiel Session Storage

Beispiel Session Storage

//Local Storage 
function saveIt()	{
   var schluessel=document.getElementById("key").value;
   var wert=document.getElementById("value").value;
   localStorage.setItem(schluessel,wert);
   }
        
function getIt()	{
   var wert=localStorage.getItem(schluessel);
   }
    
function removeIt()	{
    var schluessel=document.getElementById("key").value;
    localStorage.removeItem(schluessel);
    document.getElementById("key").value=" ";
    document.getElementById("value").value=" ";
	}
                
function clearIt()	{
    localStorage.clear();
    }