JavaScript ist eine vielseitige Programmiersprache, die in Webanwendungen weit verbreitet ist. Eine häufige Anforderung in Webanwendungen ist die Speicherung von Daten auf der Client-Seite. Hier kommen Local Storage und Session Storage ins Spiel. In diesem Artikel werden wir uns ausführlich mit diesen beiden Techniken befassen und Ihnen zeigen, wie Sie sie in Ihren JavaScript-Anwendungen verwenden können.

Einführung in Local Storage und Session Storage

Local Storage und Session Storage sind zwei Web Storage-APIs, die es ermöglichen, Daten auf der Client-Seite zu speichern und zwischen verschiedenen Sitzungen oder Seitenzugriffen beizubehalten. Beide APIs bieten eine einfache Möglichkeit, Daten im Browser des Benutzers zu speichern, und sind besonders nützlich, wenn Sie Informationen zwischen verschiedenen Teilen Ihrer Webanwendung teilen müssen.

Local Storage

Der Local Storage ist ein persistenter Speicher, der Daten dauerhaft im Browser des Benutzers speichert. Die Daten im Local Storage bleiben auch nach dem Schließen des Browsers oder dem Neustart des Computers erhalten. Sie können auf den Local Storage zugreifen, um Informationen wie Benutzereinstellungen, Präferenzen oder andere nicht-zeitkritische Daten zu speichern.

Session Storage

Im Gegensatz dazu ist der Session Storage ein Speicher, der nur für die Dauer einer Browsersitzung gültig ist. Die Daten im Session Storage bleiben erhalten, solange der Benutzer die aktuelle Sitzung oder das aktuelle Browserfenster geöffnet hat. Sobald der Benutzer den Browser schließt oder die Sitzung beendet, werden die Daten im Session Storage gelöscht. Dies macht den Session Storage ideal für temporäre Daten, die nur während einer Sitzung benötigt werden.

Verwendung von Local Storage und Session Storage

Die Verwendung von Local Storage und Session Storage ist denkbar einfach. Beide APIs bieten ein ähnliches Set von Methoden und Eigenschaften zum Speichern und Abrufen von Daten. Hier sind einige grundlegende Operationen, die Sie mit diesen APIs ausführen können:

Daten speichern

Um Daten im Local Storage oder Session Storage zu speichern, können Sie die setItem Methode verwenden. Hier ist ein Beispiel, wie Sie eine Zeichenfolge im Local Storage speichern:

localStorage.setItem( username ,  john_doe );

Im obigen Beispiel speichern wir den Benutzernamen john_doe unter dem Schlüssel username im Local Storage. Sie können denselben Ansatz verwenden, um Daten im Session Storage zu speichern:

sessionStorage.setItem( token ,  abc123 );

Daten abrufen

Um gespeicherte Daten abzurufen, verwenden Sie die getItem Methode. Hier ist, wie Sie den Benutzernamen aus dem Local Storage abrufen können:

const username = localStorage.getItem( username );
console.log(username); // Ausgabe:  john_doe 

Für den Session Storage sieht der Abruf ähnlich aus:

const token = sessionStorage.getItem( token );
console.log(token); // Ausgabe:  abc123 

Daten löschen

Wenn Sie gespeicherte Daten entfernen möchten, verwenden Sie die removeItem Methode. Hier ist ein Beispiel, wie Sie den Benutzernamen aus dem Local Storage löschen:

localStorage.removeItem( username );

Und für den Session Storage:

sessionStorage.removeItem( token );

Fehlerbehandlung und Überprüfung der Verfügbarkeit

Es ist wichtig zu beachten, dass nicht alle Browser Local Storage und Session Storage unterstützen. Bevor Sie auf diese APIs zugreifen, sollten Sie überprüfen, ob sie verfügbar sind. Hier ist ein Beispiel, wie Sie dies tun können:

if (typeof localStorage !==  undefined ) {
  // Local Storage ist verfügbar
  // Führen Sie Ihre Operationen hier aus
} else {
  // Local Storage wird nicht unterstützt
  // Behandeln Sie den Fall entsprechend
}

Sie können dieselbe Überprüfung für den Session Storage durchführen. Dies stellt sicher, dass Ihre Anwendung in älteren Browsern oder in Umgebungen ohne Unterstützung für diese APIs nicht abstürzt.

Fazit

Local Storage und Session Storage sind mächtige Werkzeuge in der Welt der Webentwicklung, um Daten auf der Client-Seite zu speichern und zu verwalten. Sie bieten eine einfache Möglichkeit, Informationen zwischen verschiedenen Teilen Ihrer Anwendung zu teilen und die Benutzererfahrung zu verbessern. Mit den in diesem Artikel gezeigten Grundlagen können Sie jetzt beginnen, Local Storage und Session Storage in Ihren JavaScript-Anwendungen zu verwenden.

Denken Sie daran, dass Sie bei der Speicherung von Daten auf der Client-Seite immer sicherstellen sollten, dass keine sensiblen oder sicherheitskritischen Informationen im Local Storage oder Session Storage gespeichert werden, da diese leicht zugänglich sind und von böswilligen Benutzern manipuliert werden können. Verwenden Sie geeignete Sicherheitsmaßnahmen, um Ihre Daten zu schützen, wenn dies erforderlich ist.