Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

HTML5 localStorage

HTML5 führt mit localStorage eine Möglichkeit ein, Daten clientseitig zu speichern. Wobei der vom Browser zur Verfügung gestellte Speicherplatz für die Speicherung von Daten als localStorage bezeichnet wird.

Im Gegensatz zur clientseitigen Speicherung mittels Cookies, bei denen der Browser gemäß des Standards mindestens 20 Cookies pro Domain mit einer Größe von 4 Kilobyte akzeptieren muss, können mit localStorage nicht nur 80 Kilobyte gespeichert werden, sondern mehrere Megabytes. Darüber hinaus werden die Daten lokal gespeichert und werden nicht wie bei Cookies immer mitgeschickt. Ebenso bleiben die Daten dauerhaft gespeichert, wohingegen diese bei Cookies nach einer bestimmten Zeit ablaufen.

Der Browser stellt eine Referenz zum localStorage Objekt für jede Domain bereit wobei die Daten im Key/Value Format abgelegt werden, was so viel heißt, dass ein Schlüssel genau einen Wert enthalten kann.

Storage Varianten

In HTML5 stehen 2 Varianten zur Speicherung von Benutzer-Daten zur Verfügung.

  1. localStorage
  2. sessionStorage

Für das Speichern, Lesen und Löschen der localStorage bzw. sessionStorage Daten sind die folgende JavaScript-Funktionen definiert:

localStorage

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. Existiert dieser Schlüssel nicht wir "undefined" zurückgegeben.
localStorage.removeItem('key');
Löscht den kompletten Datensatz des dazugehörigen Schlüssels aus dem localStorage.
localStorage.clear();
Löscht alle Daten aus dem lokalen Speicher welcher von der Domain angelegt wurde.
Beispiel
<table id="pairs"></table>
<script type="text/javascript">
function StorageSetItem() {
var key = document.forms.Storage.key.value;
var data = document.forms.Storage.data.value;
localStorage.setItem(key, data);StorageShowAll();}
function StorageGetItem() {
var key = document.forms.Storage.key.value;
document.forms.Storage.data.value = localStorage.getItem(key);StorageShowAll();}
function StorageRemoveItem() {
var key = document.forms.Storage.key.value;
document.forms.Storage.data.value = localStorage.removeItem(key);StorageShowAll();}
function StorageClear() {
localStorage.clear();StorageShowAll();}
function StorageShowAll() {
var key = "";
var pairs = "<tr><th>Schlüssel / key:</th><th>Wert / value:</th></tr>";
var i=0;
for (i=0; i<=localStorage.length-1; i++) {
key = localStorage.key(i);pairs += "<tr><td>"+key+"</td><td>"+localStorage.getItem(key)+"</td></tr>";
}
if (pairs == "<tr><th>key</th><th>Value</th></tr>") {
pairs += "<tr><td><em>leer/empty</em></td><td><em>leer/empty</em></td></tr>";
}
document.getElementById('pairs').innerHTML = pairs;
}
</script>

sessionStorage

Der Unterschied zu localStorage besteht lediglich darin, dass bei sessionStorage die gespeicherten Daten nach dem schliessen des Browsers verloren gehen.

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. Existiert dieser Schlüssel nicht wir "undefined" zurückgegeben.
sessionStorage.removeItem('key');
Löscht den kompletten Datensatz des dazugehörigen Schlüssels aus dem sessionStorage.
sessionStorage.clear();
Löscht alle Daten aus dem lokalen Sessionspeicher welcher von der Domain angelegt wurde.
Beispiel
<table id="pairs"></table>
<script type="text/javascript">
function StorageSetItem() {
var key = document.forms.Storage.key.value;
var data = document.forms.Storage.data.value;
sessionStorage.setItem(key, data);StorageShowAll();}
function StorageGetItem() {
var key = document.forms.Storage.key.value;
document.forms.Storage.data.value = sessionStorage.getItem(key);StorageShowAll();}
function StorageRemoveItem() {
var key = document.forms.Storage.key.value;
document.forms.Storage.data.value = sessionStorage.removeItem(key);StorageShowAll();}
function StorageClear() {
sessionStorage.clear();StorageShowAll();}
function StorageShowAll() {
var key = "";
var pairs = "<tr><th>Schlüssel / key:</th><th>Wert / value:</th></tr>";
var i=0;
for (i=0; i<=sessionStorage.length-1; i++) {
key = sessionStorage.key(i);pairs += "<tr><td>"+key+"</td><td>"+sessionStorage.getItem(key)+"</td></tr>";
}
if (pairs == "<tr><th>key</th><th>Value</th></tr>") {
pairs += "<tr><td><em>leer/empty</em></td><td><em>leer/empty</em></td></tr>";
}
document.getElementById('pairs').innerHTML = pairs;
}
</script>

Anwendungsbeispiel

HTML5 localStorage Beispiel

Eingabe des Schlüssel / Werte - Paar



Ausgabe der Einträge / items


Tastaturkürzel