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
- Einen Text und den Schlüssel (zufälligen Wert) eingeben und auf Speichern klicken.
- Bei einem erneuten Besuch nur den Schlüssel eingeben und auf Lesen klicken.
Quelltext Ausblenden ❘ Kopieren ❘ 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+
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
- Speichern Sie keine vertraulichen Benutzerinformationen in localStorage.
- Es ist kein Ersatz für eine serverbasierte Datenbank, da Informationen nur im Browser gespeichert werden.
- localStorage ist in allen gängigen Browsern auf 5 MB begrenzt.
- localStorage ist ziemlich unsicher, da es keine Form des Datenschutzes hat und über jeden Code auf Ihrer Webseite zugänglich ist.
Tipps
ToDo-Liste mit JavaScript - Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen.