LocalStorage und SessionStorage sind mittlerweile keine neuen Begriffe für Web Entwickler. Ich werde euch in diesem Beitrag etwas über die nicht all zu neuen Funktionalitäten der Browser berichten.
LocalStorage – SessionStorage – Cookies
Seit HTML5 bietet LocalStorage und SessionStorage eine Möglichkeit kleinere Mengen an Daten auf dem System des Benutzers zu speichern. Cookies und LocalStorage haben die gleiche Aufgabe nur braucht man je nach Applikation das Einte oder das Andere. Local- und SessionStorage werden nicht wie die Cookies mit jedem HTTP-Request auf den Server übertragen, so bleiben die Benutzerdaten lokal. Cookies sind primär für das Lesen von der Serverseite gedacht wobei LocalStorage und SessionStorage nur von der Benutzerseite gelesen werden können. Bei einer Anwendung muss man sich also überlegen wer die Daten braucht, der Server oder der Client und dann kann man sich entscheiden welchen Storage man brauchen will.
LocalStorage & SessionStorage
LocalStorage und SessionStorage stellen Speicher auf dem Rechner des Benutzers zur verfügung. Die Speichergrösse variiert je nach Browser zwischen 5 und 10 Mb. Dieser Speicher basiert auf ein Key & Value Prinzip wie zum Beispiel key: ‘name’ -> value: ‘Test’. Man kann beliebige Datentypen speichern jedoch werden alle Speicherdaten als String gespeichert sowie auch der Key.
Wie der Name schon sagt speichert der SessionStorage seine Daten nur solange der Browser sprich die Session offen ist jedoch werden die Daten bei Page reloads & restores nicht gelöscht. Öffnet man die Page in einen neuen Fenster oder Tab werden diese gelöscht. Hingegen werden Daten die im LocalStorage gespeichert sind ohne einer Zeitbegrenzung existieren.
Verwendung
Code:
localStorage.setItem(key, value); // erzeugt einen Eintrag localStorage.getItem(key); //holt einen Eintrag, gibt null zurück wen das Item nicht existiert localStorage.removeItem(key); //löscht den Eintrag localStorage.clear(); //löscht den Storage sessionStorage.setItem(key, value); // erzeugt einen Eintrag sessionStorage.getItem(key); //holt einen Eintrag, gibt null zurück wen das Item nicht existiert sessionStorage.removeItem(key); //löscht den Eintrag sessionStorage.clear(); //löscht den Storage
Da LocalStorage nur Strings speichert und bearbeitet müssen wir Arrays oder Objekte die wir speichern möchten in JSON umwandeln und beim rausholen wieder zurückwandeln.
Beispiel
Code:
localStorage.setItem(key, JSON.stringify(value)); var val = JSON.parse(localStorage.getItem(key));
- Chrome 4+
- Firefox 3.5+
- Safari 4+
- Opera 10.5+
- IE 8+
- iOS 3.2+
- Android 2.1+
- Opera Mobile 11+
Schlusswort
LocalStorage hat viele Vorteile wie zum Beispiel das man mit diesem Prinzip eine Offline Applikation bauen kann oder die Leistung seiner Webseite steigern kann indem man gewisse Daten als User schon angezeigt bekommt ohne auf den Download der gesamten Webseite zu warten. Die Daten sind jedoch angreifbar daher sollte man kritische Daten nicht in diesem Bereich verwenden und speichern.
LG
samkeez
