Benutzereingaben mit JavaScript lokal speichern

HTML 5 bietet uns die Möglichkeit, mittels des „localStorage” (JavaScript) einfache Daten im Browser zu speichern. Auch wenn man zwischendurch weg surft und dann wieder kommt sind die Daten noch auslesbar.

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

Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.
Floodsperre
Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
Mit dem PHPMailer E-Mails sicher versenden
Damit E-Mails sicher beim Empfänger ankommen und nicht irgendwo anders landen (Spamordner) oder sogar vom Provider abgelehnt werden nutzt man am besten eine fertige Mailer-Klasse wie den „PHPMailer”.
Diese Schlagwörter könnten Sie interessieren:
Zeitfunktionen Mimetypen Zeitbalken RSS Feed CSRF-Token Zoom-Funktion SQLite Metadaten Linkliste Responsiv PHP-Fehlermeldungen Webseitenschutz localStorage Operatoren Zebra-Tabelle Textgestaltung Zeitansage Dynamische Seiten Mehrfachauswahl Favicon