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
- Erster Eintrag in eine MySQL-Datenbank mit PHP
- Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
- Seiten dynamisch mit PHP erstellen
- Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.
- Verzeichnis auslesen und mit einem Link verknüpfen
- Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Quelltext Dateibrowser Gästebuch Linkliste Webseitenschutz Marquee JSON localStorage Sprachumschaltung Zeichnen Zebra-Tabelle SQLite Wecker Wasserzeichen Metadaten Diashow Sortierung Rahmen PHPMailer Event-Kalender