Benutzereingaben mit JavaScript lokal speichern [IE|M|O|G]

von: Werner Zenk

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

Beispiel:

Text:

Schlüssel:

Text und den Schlüssel eingeben und auf Speichern klicken, bei einem erneuten Besuch nur den Schlüssel eingeben und auf Lesen klicken.

Quelltext:


<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
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);
document.write(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.

• Das length-Attribut

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

Attribut length: Enthält die Anzahl der gespeicherten Elemente.
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.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Mike: Neben localStorage gibt es auch noch sessionStorage dabei werden die Daten gelöscht, sobald der Browser (ggf. auch nur Fenster/Tab, je nachdem ob der Browser diese als eigenständige Session sieht) geschlossen wird. Mike: Wie kann ich überprüfen ob ein Key (Schlüssel) bereits gesetzt wurde? Werner: if (window.localStorage.getItem(key)) { ...
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Darstellungsmodus überprüfen - Darstellungsmodus der Webseite anzeigen.

Großbuchstaben Test - Es wird ermittelt wieviele Großbuchstaben in einem Text vorhanden sind.

E-Mail Button mit Textvorbelegung

JavaScript Archiv: Dhtml

Zahlenwerte überprüfen und korrigieren

JavaScript Grundkurs - 6. Wie spät ist es?

JavaScript Grundkurs - 1. Das erste JavaScript

JavaScript Grundkurs - 10. Arrays - Datenfelder

Lesezeichen/Favoriten für I. Explorer und Firefox setzen …mehr