Benutzerdaten speichern
Die Größe des lokalen Speichers hängt vom Browser ab, meist sind es 5 bis 10 MB (aber das ist eine Ansage aus der Glaskugel). WebStorage-Objekte speichern Benutzerdaten im Client (dem Browser) – entweder für die Dauer der Session (Session Storage) oder ohne definiertes Ende (Local Storage). Die User-Daten werden nicht mehr wie Cookies mit jedem HTTP-Request auf den Server übertragen, sondern vom Browser des Benutzers gespeichert. Local Storage und Session Storage werden von allen Browsern unterstützt.
Im Gegensatz zu SessionStorage kann LocalStorage (genauso wie Cookies) den Kontext über mehrere Fenster aufrecht erhalten.
Local Storage und Session Storage bilden keine Datenbank, sondern basieren auf einfachen Schlüssel-/Wertpaaren. Der Schlüssel (key) ist ein String. Das macht den Umgang mit localStorage und sessionStorage so schön einfach gegenüber Cookies. Während wir bei Cookies den Cookie-String in mühevoller Kleinarbeit auflösen müssen, halten localStorage und sessionStorage Schlüssel für den direkten Zugriff bereit.
Local Storage setItem, getItem, removeItem
Die Verarbeitung von Local Storage und Session Storage ist dieselbe – nur das Objekt unterscheidet Local Storage von Session Storage. localStorage und sessionStorage sind Objekte von window.
// erzeugt einen Eintrag oder überschreibt den Eintrag // ohne Warnung, wenn der key schon existiert localStorage.setItem(key, value) //gibt null zurück, wenn der key nicht existiert localStorage.getItem(key) //löscht einen Eintrag localStorage.removeItem(key) // Verfügbarer Speicherplatz für das Storage-Objekt // nur IE localStorage.remainingSpace() //löscht den Speicher localStorage.clear()
localStorage kurz und bündig
Für alle Liebhaber von Pastelltönen: Farbe der Überschriften ändern
Die einfache Notation reicht schon zum Setzen des Keys.
// Wert setzen localStorage[ "'"favorite"'" ] = color; // Wert anzeigen if (localStorage["favorite"] != null) { console.log( localStorage[ "favorite" ] ); }
Und einmal eine neue Farbe für die Überschriften auf dieser Seite gewählt, bleibt die Farbe, auch wenn das Browserfenster geschlossen und die Seite später noch einmal aufgerufen wird.
Local Storage Datentyp
Die Werte können beliebige Datentypen vom String über Boolean, Integer oder Float sein, werden aber in allen Fällen als String gespeichert. Damit gespeicherte Zahlen wieder als Zahlen behandelt werden, müssen sie mit parseInt() oder parseFloat() in die Welt der Zahlen zurück geholt werden.
| Spieler | |
| Punkte | |
| Verein |
Werte übernehmen überträgt die Formulareingaben in die Tabelle darunter. Bei einem erneuten Laden der Seite (auch wenn der Browser zwischenzeitlich geschlossen wurde) holt Reload die Daten aus dem Local Storage zurück und überträgt sie auch in das Formular.
Da sich das Skript nicht um die Verwaltung der Benutzer kümmern muss, ist die Implementierung außerordentlich einfach.
localStorage.setItem überträgt Werte in den LocalStorage und localStorage.getItem liest die Werte aus dem Local Storage.
<form action="#" method="post" id="webstorage">
<input type="text" id="myKey" value="" />
…
<input type="submit" id="submit" value="Werte übernehmen" />
</form>
<script type="text/javascript">
localStorage.setItem('aField',document.getElementById('myKey').value);
</script>
Arrays in localStorage speichern
localStorage unterstützt nur Strings. Mit JSON.stringify () und JSON.parse () kann localStorage auch Arrays und Objekte komfortabel unterbringen.
// Mehrdimensionales Array
var arr = [[1,2,3],["eBike","Fahrrad","Bus","Bahn"]];
console.log (arr);
// Array in String umwandeln
var json = JSON.stringify (arr);
console.log (json);
// String in localStorage speichern
localStorage.setItem ("complex", json);
// Auslesen
var com = JSON.parse (localStorage.getItem ("complex"));
console.log (com);
Alle localStorage-Keys auslesen
for (let i=0, iC=localStorage.length; i<iC; ++i) {
let storageKey = localStorage.key(i);
console.log(storageKey + ' : ' + localStorage.getItem(storageKey) );
}
Quelle How can I get a list of the items stored in html 5 local storage from javascript?
oder kürzer mit forEach
let keys = Object.keys(localStorage);
keys.forEach(function(key){
console.log(key + " : " + localStorage.getItem(key));
});
Wann wird localStorage gelöscht?
Die Daten bleiben im Local Storage gespeichert, auch wenn der Benutzer das Browserfenster oder den Browser schließt und können zu jeder Zeit wieder abgerufen werden. Die Werte werden nicht wie bei HTTP-Cookies auf den Server übertragen, sondern bleiben Privatsache des Benutzers. Die gespeicherten Daten haben kein Ablaufdatum.
Die Browser sind angehalten, den Speicher nur aus Sicherheitsgründen zu löschen oder wenn der Benutzer die Daten löscht.
