Anleitung zu Web Storage und HTML5

So verwenden wir die Web Storage-API

Nachdem wir nun einige der Szenarien kennengelernt haben, in denen Web Storage Objekte verwendet werden können und was Web Storage genau ist, wollen wir uns die Hände schmutzig machen und uns einige Beispiele für HTM5-Web Storagecode ansehen.

Lassen Sie uns zunächst ein Element speichern und dann von localStorage abrufen. Mit diesem HTML5-Code können wir dies erreichen:

localStorage.setItem('userId', '103');
var myVar = localStorage.getItem('userId');

sessionStorage.setItem('user', 'Steffen');
var myVar = sessionStorage.getItem('user');

Im Browser können wir uns die gesetzten Werte anschauen. Dazu im geöffneten Fenster mit unserem Testscript einfach F12 drücken und dann "Web-Speicher" auswählen. Auf der linken Seite finden wir "Local Storage" und "Session Storage".

Wie Sie sehen können, sind die Elemente im Browser hinterlegt.

Die Methode .setItem kann verwendet werden, um den Schlüssel und seinen Wert festzulegen, während .getItem verwendet werden kann, um den Wert dieses bestimmten Schlüssels abzurufen. Hinweis: Diese Methode hat den Nachteil, dass nur Zeichenfolgen gespeichert werden können. Wir können jedoch Zeichenfolgen von JSON-Objekten mit den Methoden JSON.stringify() und JSON.parse() speichern und abrufen.

const person = {
    name: "Steffen",
    location: "Ebersbach-Neugersdorf"
}
window.localStorage.setItem('user',JSON.stringify(person));

Im Browser ergibt dies folgendes Bild:

Auch JSON-Objekte sind kein Problem

Eintrag auslesen

var user = JSON.parse(localStorage.getItem(user));

Element entfernen

localStorage.removeItem('Benutzer');

Oder alternativ durch

window.localStorage.removeItem('Benutzer');

Dadurch wird der Schlüssel aus dem Speicher entfernt, falls vorhanden. Wenn der Schlüssel nicht vorhanden ist, passiert nichts.

Den Speicher/Storage löschen:

window.localStorage.clear();
window.sessionStorage.clear();

Die Iteration über Elemente:

Wir können eine for-Schleife verwenden, um über die Elemente zu iterieren, da es keine foreach-Methode gibt, die zu localStorage und sessionStorage gehört. So sieht das im HTML5-Code aus:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(key, value);
}

Storage Events in HTML5

Immer wenn Daten in localStorage gespeichert werden , wird das Speicherereignis in den anderen Registerkarten und Fenstern ausgelöst. Dieses Ereignis ist zum Synchronisieren von Daten nützlich, wenn der Benutzer dieselbe Website in verschiedenen Registerkarten geöffnet hat. (Wir erinnern uns, dass dies ein ziemliche großes Problem bei der Verwendung von Cookies ist.)

Jede Änderung in einem Browsertab wird an die anderen Tabs übertragen.

Interessant ist dabei, dass Speicher-Ereignis nur ausgelöst wird, wenn der neue Wert nicht mit dem alten Wert übereinstimmt. Das Ereignis enthält Eigenschaften wie: key, oldValue und newValue. Nachfolgend ein Beispiel zur Veranschaulichung:

window.addEventListener('storage', function (event) {
    if (event.key != 'now')
    return;
    console.log('Der Wert für ' + event.key + ' wurde von: ' + event.oldValue + ' auf ' + event.newValue + 'geändert');
    }, false);


localStorage.setItem('now', Date.now());

Hier haben wir einen Event-Listener für das Storage Event erstellt. Immer wenn das Ereignis ausgelöst wird, protokolliert es den Schlüssel , den alten Wert und den neuen Wert in der Browserkonsole.

In der Browser-Konsole erhalten wir folgende Einblendung: Der Wert für Jetzt wurde von: 1628767989411 auf 1628768078580 geändert