Benutzereingaben mit JavaScript lokal speichern (Tutorial)

HTML 5 bietet uns die Möglichkeit, mittels des JavaScript: localStorage() einfache Daten im Browser zu speichern. Auch wenn man zwischendurch weg surft und dann wieder kommt sind die Daten noch auslesbar. localStorage() ist von der Domain abhängig, über das die Seite aufgerufen wurde.

Was ist die Web Storage API?

Die Web Storage API ist eine Reihe von Mechanismen, mit denen Browser Schlüssel-Wert-Paare speichern können. Es ist so konzipiert, dass es viel intuitiver ist als die Verwendung von Cookies.

Demo



  1. Einen Text und den Schlüssel (zufälligen Wert) eingeben und auf Speichern klicken.
  2. Bei einem erneuten Besuch nur den Schlüssel eingeben und auf Lesen klicken.

QuelltextKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<
html>
<
head>

<
script>
function 
speichern() {
 var 
key document.getElementById('key').value;
 var 
data document.getElementById('data').value;
 
window.localStorage.setItem(keydata);
}

function 
lesen() {
 var 
key document.getElementById('key').value;
 
document.getElementById('data').value window.localStorage.getItem(key);
}
</
script>

</
head>
<
body>

Text<br>
<
textarea id="data"></textarea> <br>
Schlüssel<input type="text" id="key">
<
input type="button" value="Speichern" onclick="speichern()">
<
input type="button" value="Lesen" onclick="lesen()">

</
body>
</
html>

Die Unterstützung von Browsern ist beindruckend: IE8+, Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10.5+, iPhone 2.0+ und Android 2.0+

Datensatz eintragen

window.localStorage.setItem("key", "data");

Gespeichert werden können Zeichenketten, Zahlen, Fließkommazahlen (127.15), Boolsche Werte (true/false) und Arrays dabei geht allerdings das Format verloren.

var ar = new Array("100", "200");
window.localStorage.setItem("key", ar);
console.log(window.localStorage.getItem("key")); // Ausgabe: 100,200

Datensatz auslesen

var inhalt = window.localStorage.getItem("key");

Datensatz enfernen

window.localStorage.removeItem("key");

Entfernt den kompletten Datensatz aus dem lokalen Speicher.

Daten löschen

window.localStorage.clear();

Löscht alle Daten aus dem lokalen Speicher welche von der Domain angelegt wurden.

Anzahl der gespeicherten Elemente

var count = window.localStorage.length;
var keyname = window.localStorage.key(n);

Das Attribut length enthält die Anzahl der gespeicherten Elemente.
Die Funktion key(n) gibt den Namen des n-ten Keys zurück. So können zusammen mit length auch Datensätze unbekannter Größe durchlaufen werden.

So einfach es auch zu bedienen ist, ist auch leicht es zu missbrauchen

Tipps

ToDo-Liste mit JavaScript - Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen.

Die Position eines Schiebereglers speichern und auslesen

Datenschutz-Hinweis über Cookies dauerhaft ausblenden