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.

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+

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

Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Fehler 404 mit .htaccess abfangen
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
Dateibrowser
Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Diese Schlagwörter könnten Sie interessieren:
RSS Feed Diashow Seitenformatierung Absolute URL Linkliste Zeitansage Mimetypen Audio-Player Marquee CSS-Counter Wecker Event-Kalender Zeichenkodierung Sicherheit Arithmetische Operatoren Zugriffsrechte Authentifizierung Berechnungen Sitemaps-Protokoll Animation Floodsperre Hover-Effekt EVA-Prinzip Suchmaschine PHPMailer