So verwenden Sie localStorage in JavaScript

Wenn Sie Entwickler sind und in die Welt von .NET einsteigen möchten, müssen Sie wissen, was möglich ist. Da das .NET Framework die beliebteste Technologie im .NET-Ökosystem ist, können Sie damit eine große Bandbreite an Anwendungen erstellen. In letzter Zeit ist jedoch etwas Neues aufgetaucht, beispielsweise .NET Core und die .NET Standard-Bibliothek. Können wir es in unserem Projekt oder Build verwenden?

Das localStorage-Objekt ist eines der am häufigsten verwendeten Objekte in der Webprogrammierung. Es bietet eine einfache Lösung zum lokalen Speichern von Schlüssel-Wert-Paaren auf dem Computer des Benutzers.

Die meisten Webentwickler bevorzugen die localStorage-API, da sie eine einfache Syntax hat und bis zu 5 MB Daten speichern kann.

Darüber hinaus unterstützen die neuesten Versionen aller gängigen Browser die Web Storage API, die localStorage und sessionStorage umfasst. Nur Opera Mini unterstützt die Webstorage-API nicht.

Sie können schnell überprüfen, ob Ihr Browser die Webstorage-API unterstützt, indem Sie Chrome DevTools öffnen. Navigieren Sie zur Konsole, geben Sie den folgenden Codeausschnitt ein und drücken Sie die Eingabetaste.

Typ von (Speicher)

Wenn Sie eine „undefined“ erhalten, unterstützt Ihr Browser die Webstorage-API nicht. Wenn Ihr Browser dies unterstützt, sollte „Feature“ angezeigt werden.

In diesem Artikel werden die folgenden Fragen untersucht:

• Was ist localStorage?
• Was ist der Unterschied zwischen localStorage und sessionStorage?
• So führen Sie CRUD-Operationen mit der localStorage-API durch
• Welche Fallstricke birgt die gemeinsame lokale Speicherung?
• Was sind die Einschränkungen von localStorage?

Was ist localStorage?

Wie bereits erwähnt, ist das localStorage-Objekt Teil der Webstorage-API, die von Browsern nativ unterstützt wird. Dies ist eine einfache, aber effektive Lösung zur Schlüssel-/Wertspeicherung.

Für Webentwickler ist die Offlinespeicherung der größte Vorteil der Verwendung des localStorage-Objekts. Am wichtigsten ist, dass keine Daten verloren gehen, wenn der Benutzer den Browser schließt oder den Computer neu startet. Mithilfe der localStorage-API können Websites lokal auf dem Computer eines Benutzers gespeicherte Daten lesen, selbst nachdem der Computer neu gestartet wurde.

Diese Lösung bietet mehrere interessante Anwendungsfälle für Webentwickler.

• Benutzereinstellungen für Websites offline speichern
• Suchverlauf des Benutzers beibehalten
• Artikel im Warenkorb behalten

Als nächstes vergleichen wir localStorage und sessionStorage.

Was ist der Unterschied zwischen localStorage und sessionStorage?

Obwohl die beiden APIs identisch zu sein scheinen, gibt es geringfügige Unterschiede in der Implementierung.

Die localStorage-API wird verwendet, um Daten lokal zu speichern. Wenn der Benutzer die Registerkarte aktualisiert, den Browser schließt oder den Computer neu startet, gehen die lokal gespeicherten Daten daher nicht verloren. Es ist eine ideale Lösung für die langfristige Speicherung wichtiger Daten.

Die sessionStorage-API übersteht eine Seitenaktualisierung, funktioniert aber nur innerhalb derselben Registerkarte.

Kurz gesagt: Achten Sie bei der Auswahl einer Speicherlösung für Ihre Anwendung darauf. Beispielsweise empfiehlt es sich, Informationen zu Benutzereinstellungen im lokalen Speicherort zu speichern. Im Gegensatz dazu eignet sich sessionStorage am besten zum Speichern von Daten für eine bestimmte Sitzung.

So führen Sie CRUD-Operationen mit der localStorage-API durch

In diesem Abschnitt erfahren Sie, wie Sie die localStorage-API zum Hinzufügen, Lesen, Aktualisieren oder Löschen verwenden. Darauf aufbauend zeige ich Ihnen einen Trick, um den localStorage für eine bestimmte Seite zu löschen.

Lassen Sie uns zunächst ein neues Schlüssel-Wert-Paar im localStorage-Objekt erstellen. Die Funktion setItem akzeptiert einen Schlüssel und seinen Wert. Wählen Sie einen geeigneten Namen für den Schlüssel, da Sie diesen Schlüsselnamen möglicherweise zum erneuten Abrufen verwenden möchten.

localStorage.setItem('mein Schlüssel', 'ein Wert')

Lassen Sie uns nun das neu erstellte Objekt erneut abrufen.

let item = localStorage.getItem('mein-Schlüssel')

console.log(item) // Ausgabe: „some-value“

Es ist ganz einfach. Lassen Sie uns fortfahren und den Wert meines Schlüssels aktualisieren. Beachten Sie, dass wir dieselbe setItem-Funktion verwenden, um ihren Wert zu überschreiben.

localStorage.setItem('mein Schlüssel', 'neuer Wert')

Lassen Sie uns zum Schluss diesen Schlüssel löschen. Die Funktion „removeItem“ akzeptiert einen Parameter, nämlich den Schlüssel, den Sie entfernen möchten.

localStorage.removeItem('mein-Schlüssel')

Um sicherzustellen, dass wir alle Schlüssel entfernt haben, verwenden wir die Clear-Funktion, um den gesamten im localStorage gespeicherten Inhalt unserer App zu löschen.

localStorage.clear()

Jetzt sind wir bereit für erweiterte localStorage-Vorgänge.

Erweiterte localStorage-Operationen: Traversal

Sehen wir uns die Methoden an, die zum Iterieren über das localStorage-Objekt und zum Nachschlagen von Schlüsseln verwendet werden.

Die erste Methode verwendet die direkteste For-Schleife. Beachten Sie, dass wir die Längeneigenschaft direkt für das localStorage-Objekt verwenden können.

für(let i=0; i<localStorage.length; i++) {
 let Schlüssel = localStorage.Schlüssel(i)
 console.log(`${key} mit Wert ${localStorage.getItem(key)}`)
}

Wir können auch direkt die Schlüsselmethode verwenden, um den entsprechenden Schlüssel abzurufen.

für (lass i = 0; i < localStorage.length; i++){
 let Schlüssel = localStorage.Schlüssel(i)
 console.log(Schlüssel)
}

Sehen wir uns als Nächstes die Fallstricke an, die bei der Verwendung der localStorage-API vermieden werden müssen.

Häufige Fehler bei localStorage

Sehen wir uns zwei der häufigsten Fallstricke bei der Interaktion mit der localStorage-API an.

Versuchen Sie zunächst, ein JSON-Objekt zu speichern. Die localStorage-API ist als Schlüssel-Wert-Speicher konzipiert. Daher akzeptiert dieser Wert nur Zeichenfolgen, keine Objekte. Dies bedeutet jedoch nicht, dass wir keine Objekte speichern können. Wir müssen es in eine Zeichenfolge serialisieren.

const dinner = { Äpfel: 5, Orangen: 1 }
localStorage.setItem('mein-Abendessen', JSON.stringify(Abendessen))

Beim Lesen des serialisierten Objekts müssen wir es erneut in JSON analysieren.

let dinner = JSON.parse(localStorage.getItem('mein-dinner'))

Versuchen Sie zweitens, einen Booleschen Wert zu speichern. Ebenso unterstützt die localStorage-API nur Zeichenfolgen. Seien Sie beim Speichern boolescher Werte vorsichtig.

Glücklicherweise ähnelt die Lösung dem Speichern eines JSON-Objekts. Beim Speichern eines booleschen Werts konvertiert die Funktion setItem ihn in eine Zeichenfolge wie diese: „true“. Um einen Booleschen Wert mit einer Zeichenfolge zu lesen, können wir die Methode JSON.parse verwenden, um ihn wieder in einen Booleschen Wert umzuwandeln.

let myBool = JSON.parse(localStorage.getItem('my-bool'))

Einschränkungen von localStorage

Hier ist ein kurzer Überblick über die Einschränkungen von localStorage.

• Stringbasierter Speicher
• Die meisten Browser haben einen begrenzten Speicherplatz von bis zu 5 MB
• Der Hauptthread wird beim Versuch, die große Zeichenfolge zu speichern, blockiert. Achten Sie darauf, nicht denselben Schlüssel gleichzeitig zu aktualisieren, da dies zu Problemen führt. In diesem Fall ist es am besten, nach einer alternativen Speicherlösung zu suchen, da die localStorage-API nicht für diesen Zweck vorgesehen ist.
• Web Worker oder Web Service können nicht auf localStorage zugreifen
• Es gibt keinen eingebauten Sicherheitsmechanismus. Daher empfehlen wir, Passwörter oder authentifizierungsbezogene Daten nicht zu speichern. Jeder mit Zugriff auf den Browser des Benutzers kann eine Seite öffnen und die im localStorage gespeicherten Informationen lesen, genau wie bei einem öffentlich zugänglichen Computer in einer Bibliothek.
  

Dies ist das Ende dieses Artikels zur Verwendung von localStorage in JavaScript. Weitere Informationen zur Verwendung von localStorage in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!