Benutzereingaben mit JavaScript lokal speichern
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.
Demo
Text und den Schlüssel eingeben und auf Speichern klicken, bei einem erneuten Besuch nur den Schlüssel eingeben und auf Lesen klicken.
Quelltext Kopieren ❘ Ausblenden ❘ Zeilen
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(key, data);
}
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+
Was macht man wenn der Browser kein localStorage() kennt?
Hierzu gibt es eine Browserweiche:
if ('localStorage' in window &&
window['localStorage'] !== null) {
...
}
else {
... Cookies, Ajax, ...
}
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.
Tipps
ToDo-Liste mit JavaScript - Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen.