HTML5 Local Storage Revisited

Key Takeaways

• HTML5 Lokaler Speicher, ein Teil der Webspeicher-API, ermöglicht die Datenspeicherung im Browser mit einer Kapazität von 2 MB bis 10 MB, abhängig vom Browser, Protokoll, Port und Top-Ebene. Im Gegensatz zu Cookies werden diese Daten nicht an den Server zurückgesandt und bestehen weiterhin über Sitzungen und Geräte -Neustarts hinweg.
• Während lokaler Speicher aufgrund seiner synchronen Natur eine Leistung erhalten kann, kann er auf mobilen Geräten schneller sein als native Cache. Um die Leistung zu optimieren, wird empfohlen, die Lesevorgänge einzuschränken und nach dem Fenster nur auf den lokalen Speicher zuzugreifen.
Nicht alle Browser unterstützen das Einstellen von Elementen im lokalen Speicher im privaten oder inkognito -Modus, und in einigen Fällen werden Daten, die im privaten Modus gespeichert sind, nach dem Verlassen gespeichert. Um eine sichere Verwendung des lokalen Speichers zu gewährleisten, ist es ratsam, nicht nur die Unterstützung zu testen, sondern auch die Fähigkeit, Elemente zu erhalten und festzulegen.

lokaler Speicher ist Teil der HTML5 -Webspeicher -API und ermöglicht es Ihnen, Daten im Browser zu speichern. Im Gegensatz zu Cookies werden Daten, die mit dem lokalen Speicher gespeichert sind, nicht an den Server zurückgesandt. Alle Daten bleiben im Client und Sie können derzeit von 2 MB bis 10 MB speichern. Diese Grenze ist mit dem spezifischen Browser, Protokoll (HTTP oder HTTPS), Port und Top -Level -Domäne gebunden.

In diesem Artikel werden wir diskutieren, wie Sie diese API verwenden, um die Leistung einer Website zu verbessern. Ich gehe davon aus, dass Sie wissen, was lokaler Speicher ist und welche Methoden ausgesetzt sind. Wenn Sie jedoch eine Auffrischung benötigen, empfehle ich, den Artikel einen Überblick über die Webspeicher -API von Colin Ihrig zu lesen.

verfügbarer Speicherplatz

Bevor wir mit der Diskussion über den lokalen Speicher beginnen, möchte ich Ihnen einen Überblick über den verfügbaren Speicherplatz in großen mobilen und Desktop -Browsern geben. Die folgenden Tabellen basieren auf dem Artikel „Mit Quoten an mobilen Browsern“.

Mobile Browser:

Browser Chrom Android -Browser Firefox iOS safari Version 40 4.3 34 6-8 Raum verfügbar 10 MB 2MB 10 MB 5mb

Desktop -Browser:

Browser Chrom Opera Firefox safari Internet Explorer Version 40 27 34 6-8 9-11 Raum verfügbar 10 MB 10 MB 10 MB 5mb 10 MB

natives Cache vs lokaler Speicher

Bei der Verwendung des lokalen Speichers bleiben Ihre Daten auf dem Client und bestehen über Sitzungen und Geräte -Neustart. Wie ich in der Einführung erwähnt habe, ist die Grenze der lokalen Speicher -API an den spezifischen Browser (wie in den vorherigen Tabellen gezeigt), Protokoll, Port und Top -Level -Domäne gebunden. Im Gegensatz dazu wird der Platz im nativen Cache des Browsers auf Websites geteilt und auf mobilen Geräten viel kleiner. Es wird häufig gespült, manchmal sogar innerhalb des gleichen Besuchs. Mobile Geräte haben ein zusätzliches Problem: Sie sind weniger leistungsstark als Desktop -Geräte, daher ist es ein Muss, eine gute Leistung zu erreichen.

Es wurde viel über die lokale Speicherleistung diskutiert. Zum Beispiel schrieb Christian Heilmann, früher mit Mozilla, „es gibt keine einfache Lösung für die lokale Lagerung“. Lokaler Speicher kann eine Leistung erhalten, wenn sie nicht sorgfältig verwendet werden. Das erste, was Sie berücksichtigen müssen, ist, dass es sich um eine synchrone API handelt, daher blockiert es den Haupt UI -Thread. Lokaler Speicher schreibt und liest Daten aus der Festplatte, die ein viel teurerer Betrieb sein können als das Lesen aus dem Speicher. Um Ihnen Zugriff auf die Daten zu erhalten, muss der lokale Speicher die Daten von der Festplatte lesen, und hier tritt der Leistungsschlag auf. Dieser Leistungstreffer ist kein Hauptproblem bei kleinen Datenmengen, kann jedoch unter Verwendung des vollständigen Speicherlimits spürbar sein.

Als gute Praxis sollten Sie versuchen, so wenige Lesevorgänge wie möglich auszuführen. Da wir mit einer synchronen API zu tun haben, sollten Sie versuchen, Daten aus dem lokalen Speicher erst nach dem Fenster zu lesen.

Die Dinge haben sich verändert

Aber die Dinge werden besser. In einem von Peter McLachlan von Mobify veröffentlichten Artikel wurde erklärt, dass lokaler Speicher 5x schneller sein kann als native Cache auf mobilen Geräten.

Im Anhang desselben Artikels finden Sie die Entwicklung der Leistung des lokalen Speichers in mobilen Browsern und wie viel es verbessert ist. Sie können auch sehen, dass der lokale Speicher immer schneller war als der native Cache.

Wer nutzt den lokalen Speicher?

Es gibt einige jüngste Fälle von Websites, die den lokalen Speicher für Cache -Assets verwenden, wie z. Sie können diese Präsentation auf der Velocity Conference 2014 anzeigen, um mehr darüber zu erfahren, wie sie dies tun können.

Außerdem hat das Magazin das Magazin mit dem Caching Web -Schriftarten im lokalen Speicher gestartet. In diesem Artikel über einige kürzlich auf ihrer Website implementierte Leistungsverbesserungen berichten sie, dass sie Web -Schriftarten aufschieben und in lokaler Speicherung unter den Änderungen, die zu den effektivsten Verbesserungen geführt haben, zwischengeführt haben.

eine Notiz zum privaten Browsing

Wie auf Caniuse.com berichtet, unter den tab bekannten Problemen, wenn sie im privaten oder inkognito -Modus ausgeführt werden, unterstützen Safari, iOS Safari und Android -Browser keine Einstellung von Elementen im lokalen Speicher.

Andere Browser wie Chrome und Firefox ermöglichen es Ihnen, Daten im lokalen Speicher im privaten Modus zu speichern. Die Daten werden jedoch gespült, wenn Sie den privaten Modus beenden. Dies ist auf Datenschutzprobleme zurückzuführen, da jemand die anhaltenden Daten verwendet, um die Aktionen des Benutzers im privaten Modus zu erfahren.

Dieses Problem kann das Verhalten Ihrer Anwendung durchbrechen, wenn ein Wert, der unter einer vorherigen Sitzung festgelegt wird, bei einem nachfolgenden Besuch voraussichtlich vorhanden sein soll. Um den lokalen Speicher sicher zu verwenden, ist es nicht nur eine gute Praxis, die Unterstützung zu testen, sondern auch auf die Fähigkeit zu testen, Elemente zu erhalten und festzulegen.

Weitere Informationen zum lokalen Speicherverhalten im privaten Modus und zum Überprüfen lokaler Speicherinhalte in verschiedenen Browsern können den Artikel "Vergessen Sie nicht, den privaten Browsing -Modus beim Testen zu überprüfen" als Referenz verwenden.

Schlussfolgerung

Vielleicht ist es an der Zeit, dass wir den lokalen Speicher und die potenzielle Nutzung wiederholen, insbesondere auf mobilen Geräten, bei denen wir sie verwenden können, um Latenz Engpässe zu vermeiden. Wir können über neue Wege nachdenken, um unsere Assets zu leisten, und sie dann sofort für unsere Benutzer bedienen. Wir haben gesehen, dass es bereits einige erfolgreiche Implementierungen der lokalen Speicherung auf unkonventionelle Weise gibt.

häufig gestellte Fragen (FAQs) zu HTML5 Lokaler Speicher

Was ist das maximale Speicherlimit für den lokalen HTML5 -Speicher? Die meisten modernen Browser bieten jedoch rund 5 MB Speicher pro Domäne an. Dies ist signifikant größer als die 4KB (ungefähr 4096 Bytes), die von Cookies angeboten werden. Es ist wichtig zu beachten, dass dieser Speicher pro Domäne und nicht pro individuelles lokales Speicherobjekt ist. Im Gegensatz zu HTTP -Cookies werden Daten, die im lokalen Speicher gespeichert sind, mit jeder HTTP -Anforderung nicht an den Server zurückgesendet. Dies bedeutet, dass es weniger anfällig für bestimmte Arten von Angriffen ist, wie z. B. Cross-Site-Skripten (XSS). Es ist jedoch immer noch anfällig für andere Arten von Angriffen, wie z. B. Cross-Site-Skripten (XSS) und CSRF (Cross-Site-Anfrage). Daher wird empfohlen, keine sensiblen Informationen wie Passwörter oder Kreditkartennummern im lokalen Speicher zu speichern.

Wie kann ich überprüfen, ob ein Browser den HTML5 -Lokalspeicher unterstützt? Hier ist ein einfacher Code -Snippet, der nach lokaler Speicherunterstützung überprüft:

if ('localStorage' im Fenster && Fenster ['localStorage']! == null) {
// Lokaler Speicher wird unterstützt
} else {
// Lokaler Speicher wird nicht unterstützt
}

Wie kann ich Daten aus dem html5 lokalen Speicher löschen?

Sie können Daten mithilfe der Clear () -Methode aus dem HTML5 -Lokalspeicher löschen. Diese Methode entfernt alle Schlüsselwertpaare aus dem lokalen Speicher für die aktuelle Domäne. Hier ist ein einfacher Code -Snippet:

localStorage.clear ();

Kann ich Objekte oder Arrays in HTML5 -Lokalspeicher speichern? HTML5 Lokaler Speicher. Der lokale Speicher unterstützt jedoch nur die String-Schlüsselwertpaare. Daher müssen Sie Ihr Objekt oder Array mit JSON.Stringify () in eine Zeichenfolge umwandeln, bevor Sie es speichern, und es mit JSON.Parse () zurück in ein Objekt oder ein Array umwandeln Der Unterschied zwischen lokalem Speicher und Sitzungspeicher? Die Daten im lokalen Speicher bleiben auch dann bestehen, wenn der Browser geschlossen und wieder geöffnet wird, während Daten im Sitzungsspeicher gelöscht werden, wenn die Seitensitzung endet, d. H. Wenn der Browser geschlossen ist. Speicher? Methode.

Kann lokaler Speicher zwischen Subdomänen geteilt werden? Jede Subdomain hat einen eigenen separaten lokalen Speicher.

Können lokale Speicherdaten zwischen verschiedenen Browsern übertragen werden? Jeder Browser hat seinen eigenen separaten lokalen Speicher. Sie können diese Ausnahme bewältigen, indem Sie sie in einem Try-Catch-Block fangen und entsprechende Maßnahmen ergreifen, z. B. Speicherplatz oder Benachrichtigung des Benutzers.

Das obige ist der detaillierte Inhalt vonHTML5 Local Storage Revisited. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!