Javascript: Arbeiten mit Local Storage und Session Storage

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.

Weitere Artikel:

Three.js: Hinzufügen von Lichtern und Schatten

Die Bibliothek Three.js ist eine leistungsstarke JavaScript-Bibliothek, die die Erstellung von 3D-Grafiken im Webbrowser erleichtert. Eine der wichtig

JavaScript: Bedingte Anweisungen (if, else if, else)

JavaScript ist eine der wichtigsten Programmiersprachen für die Webentwicklung und ermöglicht es Entwicklern, interaktive und dynamische Webseiten zu

Einführung in Three.js und 3D-Modellierung

Die Welt der 3D-Modellierung hat in den letzten Jahren erhebliche Fortschritte gemacht und ist nicht mehr nur den Profis vorbehalten. Mit fortschrittl

Javascript: Arbeiten mit Cookies

Cookies sind kleine Textdateien, die von Webseiten auf dem Computer des Benutzers gespeichert werden, um Informationen über die Sitzung oder die Websi

Three.js: Anwendung von Post-Processing-Effekten auf 3D-Szenen

In der Welt der 3D-Webentwicklung hat sich Three.js als eine der beliebtesten Bibliotheken für die Erstellung beeindruckender 3D-Szenen im Browser eta

Javascript: Dynamisches Laden von Inhalten mit AJAX und JSON

In der heutigen Webentwicklung ist die Möglichkeit, Inhalte dynamisch nachzuladen, von entscheidender Bedeutung, um reaktionsschnelle und benutzerfreu

Three.js: Erstellen eines VR- oder AR-Erlebnisses mit Three.js

Die Entwicklung von Virtual Reality (VR) und Augmented Reality (AR) hat in den letzten Jahren enorme Fortschritte gemacht und bietet aufregende Möglic

Three.js: Erstellen und Anzeigen eines einfachen Würfels

Three.js ist eine beliebte JavaScript-Bibliothek zur Erstellung von 3D-Grafiken im Webbrowser. Mit Three.js können Entwickler erstaunliche 3D-Szenen,

JavaScript: Schleifen (for, while, do-while)

Schleifen sind ein entscheidender Bestandteil jeder Programmiersprache, einschließlich JavaScript. Sie ermöglichen es Entwicklern, Codeblöcke mehrmals

Optimierung von Three.js-Anwendungen

Die Verwendung von Three.js zur Erstellung beeindruckender 3D-Anwendungen im Web hat in den letzten Jahren stark zugenommen. Entwickler auf der ganzen