HTML-API

Im Browser gibt es zwei localStorage-APIs: localStorage und sessionStorage, die beide im window-Objekt existieren. localStorage entspricht window.localStorage, und sessionStorage entspricht window.sessionStorage.

Der Hauptunterschied zwischen localStorage und sessionStorage ist ihre Lebensdauer.

Grundlegende Verwendung

  • Der Begriff hierScopebezieht sich auf: wie man localStorage zwischen verschiedenen Seiten isoliert (auf der Seite von Baidu kann man nicht das localStorage von Tencent lesen, haha).

  • localStorageSolange dasselbe Protokoll, derselbe Hostname und derselbe Port verwendet werden, können dieselben localStorage-Daten gelesen/geändert werden.

  • sessionStorageVergleichenlocalStorageGenauer gesagt, zusätzlich zu Protokoll, Hostname und Port ist es außerdem erforderlich, sich im selbenwindow(d. h. einem Browser-Tab) zu befinden.

Lebensdauer

localStorageTheoretisch ist es dauerhaft gültig, d. h. es verschwindet nicht, es sei denn, es wird aktiv gelöscht. Selbst wenn die gespeicherten Daten die vom Browser vorgegebene Größe überschreiten, werden alte Daten nicht gelöscht, sondern es wird nur ein Fehler ausgelöst. Beachten Sie jedoch, dass es in Browsern auf mobilen Geräten oder verschiedenenNative AppverwendetWebViewin,localStorageist es unzuverlässig und kann aus verschiedenen Gründen gelöscht werden (z. B. beim Beenden der App, bei Netzwerkwechsel, bei unzureichendem Speicher usw.).
sessionStorageDie Lebensdauer ist, wie der Name schon sagt, ähnlich der vonsessionsession. Sobald der Browser (einschließlich Browser-Tabs) geschlossen wird, wird dieser gelöscht. WeilsessionStoragedie Lebensdauer von sessionStorage zu kurz ist, sind seine Anwendungsszenarien sehr begrenzt. Andererseits ist er jedoch weniger anfällig für Ausnahmen und relativ zuverlässig.

Datenstruktur

localStorage ist ein standardmäßiger Schlüssel-Wert-Datentyp (KV). Er ist einfach, aber auch leicht zu erweitern. Solange das in localStorage zu speichernde Objekt auf irgendeine Weise kodiert in einen String umgewandelt wird, kann es problemlos unterstützt werden. Zum Beispiel: Das Umwandeln eines Objekts in einen JSON-String ermöglicht das Speichern von Objekten; das Umwandeln eines Bildes in eine DataUrl (base64) ermöglicht das Speichern von Bildern. Darüber hinaus ist bei Schlüssel-Wert-Datentypen die Eigenschaft, dass 'Schlüssel eindeutig sind', recht wichtig. Wenn Sie wiederholt einen Wert mit demselben Schlüssel zuweisen, wird der vorherige Wert überschrieben.

Ablaufzeit

Leider unterstützt localStorage nativ nicht das Festlegen einer Ablaufzeit. Wenn Sie eine festlegen möchten, müssen Sie selbst eine Logikschicht darum legen:

function set(key,value){ var curtime = new Date().getTime();//Aktuelle Zeit abrufen localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//In eine JSON-String-Sequenz konvertieren } function get(key,exp)//exp ist die festgelegte Ablaufzeit { var val = localStorage.getItem(key);//Hole das gespeicherte Element var dataobj = JSON.parse(val);//Das JSON-Objekt parsen if(new Date().getTime() - dataobj.time > exp)//Wenn aktuelle Zeit - die Zeit, die beim Erstellen des gespeicherten Elements festgelegt wurde > Ablaufzeit { console.log("expires");//Hinweis, dass es abgelaufen ist } else{ console.log("val="+dataobj.val); } }

Kapazitätslimit

Derzeit setzt die Industrie es im Grunde einstimmig auf 5M, was bereits viel größer ist als die 4K von Cookies. Verwende es sparsam, junger Mann.

Domain-Beschränkung

Aufgrund der Sicherheitsrichtlinie des Browsers kann localStorage nicht domänenübergreifend verwendet werden, noch kann eine Subdomain die localStorage-Daten der übergeordneten Domain erben. Das ist ganz anders als bei Cookies.

Ausnahmebehandlung

localStorage ist in der aktuellen Browserumgebung nicht völlig stabil, und es können verschiedene Fehler auftreten. Die Ausnahmebehandlung muss sorgfältig berücksichtigt werden. Persönlich denke ich, dass localStorage nur eine Optimierungsmethode für die Ressourcenlokalisierung ist. Die Benutzerfreundlichkeit des Programms darf nicht aufgrund der Verwendung von localStorage verringert werden. Ich bin absolut gegen eine Ausnahmebehandlung, die nur einige Fehlermeldungen in der Konsole ausgibt. Die Ausnahmebehandlung für localStorage verwendet im Allgemeinentry/catchzum Abfangen/Behandeln von Ausnahmen.

Wie man testet, ob der aktuelle Browser des Benutzers localStorage unterstützt

Die derzeit übliche Vorgehensweise ist, zu prüfenwindow.localStorageob er existiert.try/catchIn der Struktur,set/getwird ein Testdatenelement verwendet, um zu prüfen, ob eine Ausnahme auftritt, um festzustellen, ob der Browser localStorage unterstützt. Natürlich sollte man daran denken, die Testdaten nach dem Testen zu löschen.

Browser-Kompatibilität

Merkmal Chrome Firefox Internet Explorer Opera Safari Android Opera Mobile Safari Mobile
localStorage 4 3.5 8 10.50 4 2.1 11 iOS 3.2
sessionStorage 5 2 8 10.50 4 2.1 11 iOS 3.2

Wie man debuggt

In den Chrome-Entwicklertools,Resources - Local StoragePanel undResources - Session StorageIm Panel können Sie die localStorage-Daten unter der aktuellen Domain sehen.

Auf iOS-Geräten kann setItem() nicht wiederholt aufgerufen werden

Darüber hinaus tritt auf iPhone/iPad manchmal ein seltsamer Fehler QUOTA_EXCEEDED_ERR auf, wenn setItem() aufgerufen wird. In diesem Fall lässt er sich im Allgemeinen beheben, indem removeItem() vor setItem() aufgerufen wird.

Empfohlene Plugins

Referenzartikel

Original-Link: https://segmentfault.com/a/1190000004121465