Indikator Anweisungen Kapazit?t 80 KB pro Dom?ne (20 Cookies, bis zu 4 KB pro Cookie) Schnelles Lese-/Schreibgeschwindigkeit und gute Haltbarkeit: Die Daten werden bis zum Aufbewahren Es sind gel?schte oder abgelaufene Cookies sind dom?nenspezifische Daten. Sie sind dafür bekannt, dass sie den Ruf der Menschen verfolgen, sind jedoch für jedes System, das den Serverstatus beibehalten, wie z. B. Anmeldung, unerl?sslich. Im Gegensatz zu anderen Speichermechanismen werden Cookies normalerweise zwischen dem Browser und dem Server in jeder HTTP -Anforderung und -antwort übergeben. Beide Ger?te k?nnen Cookie -Daten überprüfen, ?ndern und l?schen.

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存儲(chǔ)值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 檢索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

; Domain =: Wenn nicht eingestellt, ist das Cookie nur in der aktuellen URL -Dom?ne erh?ltlich. Verwendung; path = mySite.com erm?glicht es, auf jeder Subdomain von mySite.com zu verwenden.
; Pfad =: Wenn nicht eingestellt, ist das Cookie nur im aktuellen Pfad und seinen Unterfassen erh?ltlich. Set; path =/ um einen beliebigen Pfad in der Dom?ne zuzulassen.
; max-agetal =: Cookie-Ablaufzeit (Sekunden)-zum Beispiel; max-altern = 60.
; l?uft =: Cookie -Ablaufdatum - zum Beispiel; l?uft = dhu, 04. Juli 2021 10:34:38 ??UTC (verwenden Sie Datum.
; sicher: Der Keks wird nur über HTTPS übertragen.
;
; samesit =: steuert, ob eine andere Dom?ne auf Cookies zugreifen kann. Stellen Sie es auf LAX ein (Standard, Cookies teilen Sie die aktuelle Dom?ne frei), streng (blockiert das anf?ngliche Cookie, wenn Sie der Link aus einer anderen Dom?ne folgen) oder keine (unbegrenzt).

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

const state = JSON.parse( localStorage.getItem('state') );

localStorage.removeItem('state')

Zuverl?ssige M?glichkeit, den Zustand zwischen Client und Server zu erhalten
Dom?ne und (optionale) Pfade nur
verwenden Sie max-Alter (Sekunden) oder Ablauf (Datum) für die automatische Ablaufregelung
• standardm??ig in der aktuellen Sitzung verwendet (setzen

• Cookies werden oft von Browsern und Plugins blockiert (sie werden normalerweise in Sitzungs Cookies umgewandelt, damit die Website weiter funktionieren kann)
• ungeschickte JavaScript-Implementierung (es ist besser, Ihren eigenen Cookie-Handler zu erstellen oder eine Bibliothek wie JS-Cookie auszuw?hlen)
Nur
• Strings (erfordert Serialisierung und Deserialisierung)
• Speicherplatz ist begrenzt
• Cookies k?nnen von Drittanbieter-Skripten überprüft werden, es sei denn, Sie beschr?nken den Zugriff
• beschuldigt wegen Datenschutzverletzungen (regionale Gesetzgebung kann verlangen, dass Sie Warnungen vor nicht wesentlichen Cookies zeigen)
• Cookie-Daten werden an jede HTTP-Anforderung und -Anforderung beigefügt, die die Leistung beeinflussen kann (das Speichern von 50 KB Cookie-Daten und Anfordern von zehn 1-Byte-Dateien generiert eine Million Bytes Bandbreite)

Vermeiden Sie die Verwendung von Cookies, es sei denn, es gibt keine praktikable Alternative.

9. Fenster.Name

Metriken Anweisungen Kapazit?ts?nderungen, sollten jedoch in der Lage sein, mehrere Megabyte von Lese-/Schreibgeschwindigkeiten aufzunehmen. Die Daten zur Aufrechterhaltung der Sichtssitzung bleiben jedoch bis zum Fenster geschlossen, bis das Fenster geschlossen wird Die NAME -Eigenschaft setzt und erh?lt den Namen des Fenster -Browser -Kontextes. Sie k?nnen einen einzelnen String -Wert festlegen, der zwischen dem Auffrischen des Browsers oder dem Verknüpfen mit einem anderen Ort und dem Klicken zurück. Zum Beispiel:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

überprüfen Sie den Wert mit der folgenden Methode:

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存儲(chǔ)值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 檢索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

Profis:

• Einfach zu verwenden
• Daten für nur Sitzung verfügbar

Nachteile:

Nur
• Zeichenfolgen: Serialisierung und Deserialisierung sind
erforderlich.
Seiten in anderen Feldern k?nnen Daten lesen, ?ndern oder l?schen (verwenden Sie sie nicht für vertrauliche Informationen)

Fenster.Name wurde nie für die Datenspeicherung ausgelegt. Dies ist ein Trick und es gibt bessere Optionen für .

10. websql

Indikator Anweisungen Kapazit?t 5 MB pro Dom?nen lesen/schreiben langsame Persistenzdaten, bis das L?schen von WebsQL ein SQL-?hnlicher Datenbankspeicher ist, um Browser einzuführen. Beispielcode:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Chrome und einige Versionen von Safari unterstützen diese Technologie, aber Mozilla und Microsoft lehnen sie ab und unterstützen stattdessen IndexedDB.

Profis:

• entwickelt für leistungsstarke Clientdatenspeicher und Zugriff
• vertraute SQL-Syntax, die h?ufig von serverseitigen Entwicklern
verwendet wird

Nachteile:

• Browserunterstützung ist begrenzt und es gibt Fehler
• Inkonsistenz zwischen SQL -Syntax zwischen Browsern
• asynchronen, aber ungeschickt Callback-basierte API
• schlechte Leistung

Verwenden Sie keine Websql! Es war keine praktikable Option, seit die Spezifikation von 2010 veraltet war.

überprüfen Sie den Speicher

Speicher -API kann den verfügbaren Speicherplatz der APIs von Webspeichern, IndexedDB und Cache überprüfen. Alle Browser mit Ausnahme von Safari und IE unterstützen eine vielversprechende API, die eine .Sestimate () -Methode zur Berechnung von Quoten (den Raum für die Dom?ne) und die Verwendung (der verwendete Raum) bietet. Zum Beispiel:

const state = JSON.parse( localStorage.getItem('state') );

Es gibt zwei weitere asynchrone Methoden:

• .Persist (): Return true, wenn die Website die Erlaubnis hat, persistente Daten zu speichern,
• .Persisted (): Gibt true zurück, wenn die Website persistente Daten gespeichert hat.

Mit dem Anwendungsfeld im Browser -Entwickler -Tool (in Firefox genannt) k?nnen Sie LocalStorage, SessionStorage, IndexedDB, Websql, Cookies und Cache -Speicher anzeigen, ?ndern und l?schen.

Sie k?nnen auch Cookie -Daten überprüfen, die in HTTP -Anforderung und Antwort -Header gesendet werden, indem Sie auf ein beliebiges Element im Webpanel des Entwickler -Tools klicken.

Storage Hotpot

Diese Speicherl?sungen sind nicht perfekt, Sie müssen mehrere L?sungen in komplexen Webanwendungen einnehmen. Dies bedeutet, mehr APIs zu lernen. Aber es ist eine gute Sache, in jeder Situation eine Wahl zu haben - sagen wir natürlich, Sie k?nnen die richtige Option ausw?hlen!

h?ufig gestellte Fragen zu lokalen Speicheralternativen

Was kann ich anstelle eines lokalen Speichers verwenden?

Bei der Suche nach Alternativen zum lokalen Speicher in der Webentwicklung k?nnen Optionen wie Sitzungsspeicher, Cookies und IndexedDB in Betracht gezogen werden. Der Sitzungsspeicher bietet einen tempor?ren Speicher für Seitensitzungen, w?hrend Cookies kleine Daten sind, die mit jeder HTTP -Anforderung gesendet werden, die für die Sitzungsverwaltung und das Speichern von begrenzten Daten verwendet werden k?nnen. IndexedDB bietet eine leistungsst?rkere L?sung für das Speichern strukturierter Daten auf der Client -Seite, sodass sie für Anwendungen geeignet sind, für die asynchrones Datenabruf erforderlich ist. Server-Seiten-Speicherl?sungen (wie MySQL, PostgreSQL, MongoDB) oder Cloud-basierte Datenbanken (wie Firebase, AWS DynamoDB oder Google Cloud Firestore) k?nnen für eine breitere Datenspeicherung vorzuziehen oder wenn Sicherheit und Persistenz kritisch sind. Darüber hinaus bieten einige Client -Frameworks ihre eigenen staatlichen Verwaltungsl?sungen an, w?hrend Dienstangestellte Daten und Assets für Offline -Funktionen zwischenspeichern k?nnen.

Wann sollten Sie nicht den lokalen Speicher verwenden?

lokaler Speicher ist eine universelle Client -Speicherl?sung, in einigen F?llen ist dies jedoch m?glicherweise nicht die am besten geeignete Option. Erstens ist der lokale Speicher nicht für die Speicherung sensibler oder vertraulicher Informationen geeignet, da sie keine Verschlüsselungs- oder Sicherheitsma?nahmen vorliegt, die sie für unbefugten Zugriff anf?llig machen. Kritische Daten wie Passw?rter oder pers?nliche Identit?ten sollten mithilfe eines starken Sicherheitsprotokolls sicher auf der Serverseite gespeichert werden. Zweitens hat die lokale Lagerung eine begrenzte Kapazit?t, normalerweise etwa 5 bis 10 MB pro Dom?ne. Es ist nicht für Anwendungen geeignet, die gro?e Datenmengen verarbeiten müssen. In diesem Fall sollten serverseitige Datenbanken oder leistungsf?higere Clientoptionen wie IndexedDB in Betracht gezogen werden, um gr??ere Datens?tze aufzunehmen. Schlie?lich kann ein lokaler Speicher zu Leistungsproblemen führen, insbesondere im Umgang mit gro?en Datens?tzen, da er synchron ausgeführt wird und den Hauptfaden blockieren kann. Für leistungskritische Anwendungen k?nnen Sie asynchrone Speicherl?sungen wie IndexedDB oder Implementierung von Speicher-Caching verwenden, um eine reibungslose Benutzererfahrung zu erhalten. Zusammenfassend ist die lokale Speicherung für die leichte, nicht sensitive Datenspeicherung wertvoll, die spezifischen Anforderungen des Projekts müssen bewertet werden. Für sensible Informationen, gro?e Datens?tze oder leistungskritische Anwendungen sollten alternative Speicherl?sungen untersucht werden, um die Datensicherheit, Skalierbarkeit und die beste Benutzererfahrung sicherzustellen.

Was ist besser, LocalStorage oder SessionStorage?

Die Auswahl von LocalStorage und SessionStorage h?ngt haupts?chlich von der Dauer der Datenpersistenz und Ihrem spezifischen Anwendungsfall ab. LocalStorage ist eine bessere Wahl, wenn Sie Daten zwischen Browsersitzungen bestehen müssen. Es eignet sich zum Speichern von Daten wie Benutzerpr?ferenzen, Einstellungen oder Cache -Ressourcen, die an den Benutzer erhalten bleiben sollten, auch wenn der Benutzer den Browser schlie?t und sp?ter zur Website zurückkehrt. Seine Beharrlichkeit und eine gr??ere Speicherkapazit?t machen es ideal für Szenarien, in denen eine langfristige Datenbindung erforderlich ist. SessionStorage hingegen ist ideal für Daten, die nur w?hrend der aktuellen Seitensitzung verfügbar sind. Wenn ein Benutzer einen Tab oder einen Browser schlie?t, werden die Daten automatisch gel?scht, um die Privatsph?re zu gew?hrleisten und das Risiko einer unbeabsichtigten Speicherung unn?tiger Informationen zu verringern. Dies macht es ideal, um tempor?re Daten wie Formdaten, CART -Inhalte oder Statusverwaltung in einer einzelnen Benutzerinteraktion zu verwalten.

Was ist eine Client -Datenbank?

Client-Datenbank, auch als Front-End-Datenbank bezeichnet, ist eine Datenbank, die sich im Webanwendungs-Client befindet (normalerweise im Webbrowser des Benutzers) und wird dort ausgeführt. Es wird verwendet, um Daten auf Client -Ger?ten zu speichern und zu verwalten, Webanwendungen offline zu arbeiten, die Serverlast zu reduzieren und die Benutzererfahrung zu verbessern, indem die Notwendigkeit h?ufiger Serveranforderungen minimiert werden. Client -Datenbanken werden h?ufig in der Webentwicklung verwendet, um Daten direkt auf dem Ger?t des Benutzers zu speichern und abzurufen. Eines der h?ufigsten Beispiele für Client-Datenbanken ist indexiert, eine JavaScript-API auf niedriger Ebene, die eine strukturierte Datenbank zum Speichern gro?er Datenmengen in einem Webbrowser bereitstellt. IndexedDB erm?glicht es Entwicklern, Daten zu erstellen, zu lesen, zu aktualisieren und zu l?schen, wodurch sie für Anwendungen geeignet sind, für die Offline -Speicher und Verwaltung gro?er Informationsmengen erforderlich ist. Weitere Beispiele für Client-Datenbanken sind Webspeicher (LocalStorage und SessionStorage) zum Speichern kleiner Datenmengen sowie verschiedene In-Memory-Datenbanken, die in JavaScript für tempor?re Datenspeicher w?hrend der Benutzersitzungen implementiert sind. Client -Datenbanken sind besonders nützlich für Webanwendungen wie progressive Webanwendungen (PWAs), bei denen die Funktionalit?t auch dann beibehalten werden muss, wenn der Benutzer offline ist oder eine begrenzte Internetverbindung hat. Sie erg?nzen die serverseitige Datenbank, indem sie einen Mechanismus bereitstellen, um Daten lokal auf Benutzerger?ten zu speichern und so die Latenz zu verringern und die Benutzererfahrung zu verbessern.

Was sind die verschiedenen Arten des Clientspeichers?

Es gibt viele Formen des Clientspeichers in der Webentwicklung, jeweils eigene Eigenschaften und Anwendungsf?lle. Ein g?ngiger Typ ist der Webspeicher, der LocalStorage und SessionStorage umfasst. LocalStorage eignet sich zum Speichern kleiner Datenmengen, die in Browser -Sitzungen bestehen müssen, wodurch sie für Benutzereinstellungen oder Einstellungen geeignet sind. Stattdessen ist SessionStorage-Sitzungsbegrenzung und speichert Daten nur w?hrend einer einzelnen Seitensitzung, wodurch es für tempor?re Daten ideal ist, z. B. Einkaufswagen-Inhalte oder Formulardaten, die w?hrend der Benutzerinteraktion mit Webseiten erforderlich sind. Eine weitere Option ist indexedDB, ein fortschrittlicheres Client -Datenbanksystem. IndexedDB bietet einen strukturierten Speicher für die Verwaltung gro?er Datenmengen auf Benutzungsger?ten. Es unterstützt asynchrones Datenabruf, Indexierung, Transaktionen und mehr. Damit ist es ideal für Anwendungen, die komplexe Datenverarbeitung und Offline -Funktionen wie progressive Webanwendungen (PWA) erfordern. Darüber hinaus sind Cookies kleine Datenfragmente, die auf dem Client -Ger?t gespeichert und mit jeder HTTP -Anforderung an den Server gesendet werden k?nnen. Obwohl heute nicht in der allgemeinen Datenspeicherung verwendet werden, k?nnen Cookies dennoch für Aufgaben wie Sitzungsverwaltung, Benutzerauthentifizierung und Verfolgung der Benutzereinstellungen verwendet werden. Jede Art von Kundenspeicher verfügt über Vor- und Nachteile, und die Auswahl h?ngt von Ihren spezifischen Anforderungen wie Datengr??e, Persistenzanforderungen und Anwendungsf?llen ab.

Das obige ist der detaillierte Inhalt von10 clientseitige Speicheroptionen und wann sie verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!