So verwenden Sie SessionStorage und LocalStorage in Javascript

Vorwort

Als Webentwickler speichern Sie häufig Daten in Webbrowsern, um das Benutzererlebnis zu verbessern und die Leistung von Webanwendungen zu steigern. In den meisten Fällen stehen uns LocalStorage und SessionStorage zur Nutzung zur Verfügung.

In diesem Artikel bewerten wir SessionStorage und LocalStorage aus den Perspektiven Sicherheit und Benutzererfahrung. Wir besprechen dann, wie Sie basierend auf Ihren Anforderungen das richtige Objekt auswählen.

Einführung in SessionStorage und LocalStorage

Vor HTML5 verwendeten Entwickler Cookies im Allgemeinen, um einige einfache Informationen auf dem Client zu speichern. Nach der Veröffentlichung von HTML5 wurde eine neue Methode zum lokalen Speichern von Daten auf dem Client bereitgestellt, nämlich Web Storage, das ebenfalls in LocalStorage und SessionStorage unterteilt ist und das Speichern von Daten in Form von Schlüssel-Wert-Paaren in einem Webbrowser über JavaScript ermöglicht. Im Vergleich zu Cookie bietet es folgende Vorteile:

• Verfügt über eine größere Speicherkapazität, Cookie ist 4k, Webspeicher ist 5M.
• Es ist einfacher, Daten zu verarbeiten als Cookies.
• Es wird nicht bei jeder Anfrage an den Server gesendet.

So verwenden Sie SessionStorage und LocalStorage

Sie können über das Browserfensterobjekt auf SessionStorage und LocalStorage zugreifen. Schauen Sie sich das folgende Beispiel an:

sessionStorage = Fenster.sessionStorage
localStorage = fenster.localStorage

Nachfolgend sind die für beide Speichertypen verfügbaren Funktionen aufgeführt.

//Einen Artikel speichern
  storage.setItem('Name', 'Alice')
  storage.setItem('Alter', '5')
//Einen Artikel lesen
  storage.getItem('name') // gibt "Alice" zurück
//Länge des Speicherobjekts abrufen storage.length // gibt 2 zurück
//Den entsprechenden Schlüsselnamen über den Index storage.key(0) holen // gibt "name" zurück
//Ein Element entfernen
  Speicher.removeItem('Name')
//Speicherobjekt löschen storage.clear()

Unterschied zwischen LocalStorage und SessionStorage

Der Hauptunterschied zwischen LocalStorage und SessionStorage besteht in der unterschiedlichen Art und Weise, wie Daten zwischen Browserfenstern und -tabs geteilt werden.

LocalStorage kann über Browserfenster und -tabs hinweg gemeinsam genutzt werden. Das heißt, wenn Sie eine Anwendung in mehreren Registerkarten und Fenstern geöffnet haben und LocalStorage in einer der Registerkarten oder Fenster aktualisiert wird, werden die aktualisierten LocalStorage-Daten in allen anderen Registerkarten und Fenstern angezeigt.

SessionStorage-Daten sind jedoch unabhängig von anderen Registerkarten und Fenstern. Wenn zwei Registerkarten gleichzeitig geöffnet sind und eine davon den SessionStorage aktualisiert, wird dies nicht in den anderen Registerkarten und Fenstern widergespiegelt. Nehmen wir ein Beispiel: Angenommen, ein Benutzer möchte über zwei Browser-Tabs zwei Hotelzimmer buchen. Da es sich dabei um individuelle Sitzungsdaten handelt, eignet sich die Verwendung von SessionStorage ideal für eine Hotelbuchungsanwendung.

Sicherheitshinweise

Die Speicherobjekte von Web Storage sind unabhängig vom Domänennamen, was bedeutet, dass Webanwendungen auf verschiedenen Websites über eigene unabhängige Speicherobjekte verfügen und nicht aufeinander zugreifen können. In dieser Hinsicht sind SessionStorage und LocalStorage identisch.

Beispielsweise kann eine auf abc.com bereitgestellte Webanwendung nicht auf die Web Storage-Objekte von xyz.com zugreifen.

Dasselbe gilt für Subdomains. Obwohl www.grapecity.com.cn und gcdn.grapecity.com.cn zur selben Hauptdomain von grapecity.com.cn gehören, können sie nicht auf die Speicherobjekte des jeweils anderen zugreifen.

Darüber hinaus sind die Subdomänen nicht nur voneinander unabhängig, sondern auch für die Protokolle http und https unterschiedlich, sodass auch dieser Punkt beachtet werden muss.

Umgang mit Cross-Site-Scripting (XSS)-Angriffen

Zunächst einmal: Was ist ein XSS-Angriff?

XSS ist ein bösartiges Skript, das einer Webseite hinzugefügt wird und vom Browser geladen und ausgeführt wird, um anzugreifen und private Informationen zu erlangen.

Sowohl LocalStorage als auch SessionStorage sind derzeit anfällig für XSS-Angriffe. Ein Angreifer kann schädliche Skripte direkt zu Speicherobjekten hinzufügen und ausführen. Daher ist es nicht empfehlenswert, vertrauliche persönliche Daten im Web Storage zu speichern, zum Beispiel:

• Benutzername und Passwort
• Kreditkarteninformationen
• JsonWeb-Token
• API-Schlüssel
• Sitzungs-ID

Wie vermeidet man Angriffe?

• Versuchen Sie, nicht mehrere Webanwendungen unter demselben Domänennamen bereitzustellen. Wenn dies der Fall ist, versuchen Sie, zum Bereitstellen von Anwendungen Subdomänen zu verwenden, denn wenn mehrere Anwendungen denselben Domänennamen verwenden, teilen sich alle Benutzer die Webspeicherobjekte.
• Sobald Daten im LocalStorage gespeichert sind, hat der Entwickler keine Kontrolle mehr darüber, bis der Benutzer sie löscht. Wenn Sie möchten, dass Daten nach Beendigung der Sitzung automatisch gelöscht werden, verwenden Sie SessionStorage.
• Alle aus WebStorage gelesenen Daten müssen validiert, codiert und maskiert werden.
• Verschlüsseln Sie Daten, bevor Sie sie im WebStorage speichern.

Verbesserung der Benutzererfahrung

Obwohl einige sensible Daten vermieden werden sollten, können wir die Benutzererfahrung von Webanwendungen durch WebStorage dennoch verbessern

Beispiel: Ein Benutzer füllt ein Formular aus, schließt aber aus irgendeinem Grund die Registerkarte/das Fenster. Der LocalStorage des Formulars implementiert jedoch die Funktion zum automatischen Speichern des Benutzerformulars, sodass beim erneuten Öffnen die zuvor vom Benutzer eingegebenen Informationen automatisch wiederhergestellt werden.

<!DOCTYPE html>
<html>
<Text>
<h2>Formularbeispiel</h2>
<form>
  <label for="lname">Nachname:</label><br>
  <input type="text" id="lname" name="lname" value="" onchange="speichern(dies)">
  <label für="fname">Name:</label><br>
  <input Typ="Text" id="fname" name="fname" Wert="getValue(diesen)" onchange="speichern(diesen)"><br>
</form>
<Skript>
  localStorage = fenster.localStorage
  Funktion speichern(Eingabe) {
    localStorage.setItem(Eingabe-ID, Eingabe-Wert)
  }
document.getElementById("fname").value=localStorage.getItem("fname")
 document.getElementById("lname").value=localStorage.getItem("lname")
</Skript>
</body>
</html>

Da unser Szenario darin besteht, den zuvor ausgefüllten Inhalt beim erneuten Öffnen durch den Benutzer automatisch wiederherzustellen, können wir hier SessionStorage nicht als Speicherobjekt verwenden, da dieser beim Schließen des Fensters automatisch gelöscht wird.

Verwenden von Speicherobjekten für das Browser-Caching

Im Allgemeinen können wir einige Anwendungsdaten für die spätere Verwendung durch Webanwendungen zwischenspeichern. Wenn Ihre Webanwendung beispielsweise Währungsdaten für alle Länder laden muss, müssen Sie ohne Verwendung von WebStorage bei jedem Laden und Abrufen der Liste eine HTTP-Anforderung senden. Nachdem Sie die Daten in LocalStorage gespeichert haben, können Sie die Daten direkt abrufen.

Da LocalStorage nicht abläuft, können Benutzer den Inhalt des Speicherobjekts jederzeit verwenden, wenn sie die Seite öffnen. Wenn Benutzer LocalStorage-Daten löschen möchten, ist dies ebenfalls sehr einfach. Löschen Sie einfach den Inhalt des Browser-Cache.

Auf Änderungen am LocalStorage warten

LocalStorage ist ein Objekt, das als lokaler persistenter Speicher verwendet werden kann. Wir können ihm Datenspeicher hinzufügen. Ebenso müssen wir in der Lage sein, es zu überwachen, wenn es sich durch Benutzeroperationen ändert. Wenn es sich ändert, wird ein Speicherereignis ausgelöst. Wir können dieses Ereignis im Fenster überwachen, um einige logische Operationen abzuschließen.

window.addEventListener('storage', () => {
  ...
});
 
fenster.onstorage = () => {
  ...
};

Zusammenfassung und Fazit

Sie können je nach Anwendungsfall zwischen LocalStorage und SessionStorage wählen. Wenn Ihre Anwendung Daten über mehrere Browserfenster und -registerkarten hinweg teilen muss, verwenden Sie LocalStorage, andernfalls verwenden Sie SessionStorage.

Sowohl SessionStorage als auch LocalStorage sind anfällig für XSS-Angriffe. Vermeiden Sie daher die Speicherung sensibler Daten im Browserspeicher.

Obwohl WebStorage sehr nützlich ist, wird seine Verwendung in den folgenden Situationen empfohlen:

• Keine sensiblen Daten
• Die Datengröße beträgt weniger als 5 MB
• Hohe Leistung ist nicht wichtig

Oben finden Sie Einzelheiten dazu, wie Javascript SessionStorage und LocalStorage verwendet. Weitere Informationen zu Javascript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!