Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

Zuvor habe ich den Hintergrundüberprüfungsmechanismus geklärt, hauptsächlich die Verwendung von Cookies, Sitzungen und Tokens, Django: Cookie-Einstellungen und domänenübergreifende Problembehandlung, Django-Implementierung: Cookies mit Sitzungen, Django: Token-basierte Überprüfung. Dies bedeutet natürlich nicht, dass Token das Beste ist. Es muss immer noch entsprechend den Projektanforderungen ausgewählt werden und kann auch gemischt und verwendet werden.

Was wir heute tun werden, ist, das vom Hintergrund gesendete Token im Client zu speichern. Dies kann in Cookies, LocalStorage, SessionStorage und anderen Orten gespeichert werden. Cookies wurden bereits zuvor eingeführt, daher werden wir sie hier ignorieren. Wir werden hauptsächlich über LocalStorage und SessionStorage sprechen.

Was ist LocalStorage

LocalStorage wird als „lokaler Speicher“ übersetzt. Es ist ein neues Speicherobjekt in HTML5. Wie Cookie wird es auch für den lokalen Speicher verwendet, löst jedoch das Problem des unzureichenden Speicherplatzes für Cookie (jedes Cookie hat 4 KB Speicherplatz), während LocalStorage-Browser im Allgemeinen 5 MB unterstützen und normalerweise in Form von Schlüssel/Wert-Paaren gespeichert werden.

Was ist SessionStorage

SessionStorage wird übersetzt als „Sitzungsspeicher“ und ist ebenfalls ein neues Speicherobjekt, das HTML5 hinzugefügt wurde. Es wird verwendet, um Daten vorübergehend lokal im selben Fenster zu speichern. Die Daten werden gelöscht, nachdem das Fenster geschlossen wird. SessionStorage-Browser unterstützen im Allgemeinen 5M und werden normalerweise in Form von Schlüssel/Wert-Paaren gespeichert.

Unterschied zwischen LocalStorage und SessionStorage

Der LocalStorage-Lebenszyklus ist permanent. Sofern Sie die LocalStorage-Informationen nicht aktiv löschen, bleiben die Informationen immer auf dem Client gespeichert. Der SessionStorage-Lebenszyklus ist temporär und nur im aktuellen Sitzungsfenster gültig. Die Daten werden automatisch gelöscht, wenn die Seite oder der Browser geschlossen wird.

Eigenschaften von LocalStorage und SessionStorage

1. Daten im LocalStorage oder SessionStorage können nicht zwischen verschiedenen Browsern geteilt werden.

2. LocalStorage und SessionStorage können eine einheitliche API-Schnittstelle verwenden.

3. LocalStorage oder SessionStorage speichert Daten normalerweise in Form von Schlüssel/Wert-Paaren, sodass das Datenformat während der Speicherung konvertiert werden muss. Verwenden Sie die Methode JSON.stringify, um das Objekt in eine Zeichenfolge zu konvertieren, und verwenden Sie die Methode JSON.parse, um die Zeichenfolge während der Extraktion in ein Objekt zu konvertieren.

4. LocalStorage oder SessionStorage ist ein neues Attribut von HTML5 und erfordert daher die Unterstützung von neueren Browsern.

Verwendung von LocalStorage und SessionStorage

Da die Anwendung von LocalStorage dieselbe ist wie die von SessionStorage, werde ich sie hier nicht erläutern. Ich werde LocalStorage als Beispiel verwenden.

LocalStorage bietet 5 Methoden, nämlich clear (LocalStorage löschen), getItem (lokale Daten abrufen), key (den Wert des Schlüssels abrufen, der dem Index entspricht), removeItem (löschen, um Daten zu speichern) und setItem (setzen, um Daten zu speichern).

Im Folgenden finden Sie spezifische Verwendungsmethoden und Anweisungen. Sie können localStorage direkt verwenden, um die entsprechenden Methoden anzuzeigen. Wir können sie verwenden, solange wir ihre entsprechenden Anwendungseigenschaften verstehen.

Auf diese Weise können wir localStorage.setItem('key', 'value') verwenden, um die vom Server gesendeten Daten lokal auf dem Client zu speichern. Denken Sie daran, die Daten vor dem Speichern zu konvertieren.

Anwendungsbeispiele für LocalStorage und SessionStorage

Unten sehen Sie die Anwendung, die ich gerade entwickle. Zuvor habe ich über JsonResponse JSON-Daten an das Frontend gesendet, die Daten (vom Benutzer angeforderte Daten), Token (vom Server generiertes Token) und Code (im Hintergrund verarbeiteter Statuscode) enthielten. Nach dem Empfang dieser Daten verarbeitet das Frontend die Daten und bestimmt, ob die Coderückgabe erfolgreich war. Bei Erfolg analysieren wir die Daten und speichern sie lokal, andernfalls schlägt der Zugriff fehl.

Hier verwende ich localStorage und sessionStorage, um jeweils zwei Daten zu speichern. LocalStorage wird angepasst und sessionStorage wird aus dem Hintergrund abgerufen. Öffnen Sie die Browser-Entwicklertools. In der Anwendung finden wir unter Speicher die entsprechenden Werte, die wir in localStorage und sessionStorage gespeichert haben.

Damit ist dieser Artikel über die Unterschiede und Verwendungen von LocalStorage und SessionStorage in Vue abgeschlossen. Weitere relevante Inhalte zu Vue LocalStorage und SessionStorage finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!