suchen
HeimWeb-Frontendjs-TutorialHTML5 Local Storage Revisited

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.

HTML5 Local Storage Revisited 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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ersetzen Sie Stringzeichen in JavaScriptErsetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Erstellen Sie Ihre eigenen AJAX -WebanwendungenErstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AM

Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

JQuery MatrixeffekteJQuery MatrixeffekteMar 10, 2025 am 12:52 AM

Bringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie

So bauen Sie einen einfachen JQuery SliderSo bauen Sie einen einfachen JQuery SliderMar 11, 2025 am 12:19 AM

In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann

So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterSo laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterMar 10, 2025 am 01:01 AM

Datensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)