Web-Frontend
H5-Tutorial
Raid on HTML5 Javascript API Extension 3 – eine neue Erfahrung mit lokalen Storage_HTML5-Tutorial-Fähigkeiten
Raid on HTML5 Javascript API Extension 3 – eine neue Erfahrung mit lokalen Storage_HTML5-Tutorial-Fähigkeiten
Das Speichern von Daten auf dem Client kann viele Probleme lösen und unnötige Datenübertragungen reduzieren:
1. Kann den Status des Programms speichern: Der Benutzer kann wissen, wo er gearbeitet hat, nachdem er den Browser geschlossen und geöffnet hat es wieder.
2. Möglichkeit zum Zwischenspeichern von Daten: Für viele Daten, die sich nicht ändern, ist es nicht erforderlich, jedes Mal Daten vom Server abzurufen.
3. Kann Benutzereinstellungen speichern: Diese Art von Daten müssen normalerweise nicht auf dem Server gespeichert werden.
Vorheriger Ansatz
Wenn wir vor der lokalen Speicherung von HTML5 persistente Daten auf dem Client speichern wollten, hatten wir mehrere Optionen:
1. Die Nachteile von HTTP-Cookies liegen auf der Hand: Sie können nur bis zu 4 KB Daten speichern und jede HTTP-Anfrage wird im Klartext an den Server zurückgesendet (es sei denn, Sie verwenden SSL).
2. IE-Benutzerdaten. userData ist eine lokale Speicherlösung, die von Microsoft während der Browserkriege der 1990er Jahre eingeführt wurde. Sie nutzt das Verhaltensattribut von DHTML, um bis zu 64 KB Daten zu speichern Die Mängel von userData liegen auf der Hand. Es ist nicht Teil der Webstandards. Wenn Ihre Anwendung also nicht nur den IE unterstützen muss, ist es von geringem Nutzen.
3. Flash-Cookies. Flash-Cookie ist eigentlich nicht dasselbe wie HTTP-Cookie. Vielleicht sollte es „Flash-Lokalspeicher“ heißen. Mit Flash-Cookies kann jede Website standardmäßig nicht mehr als 100 KB an Daten speichern Großer Speicherplatz für den Benutzer, mit Hilfe der ExternalInterface-Schnittstelle können Sie den lokalen Speicher von Flash einfach über Javascript bedienen. Das Problem mit Flash ist einfach, dass es Flash ist.
4. Google Gears. Gears ist ein Open-Source-Browser-Plugin, das 2007 von Google veröffentlicht wurde und darauf abzielt, die Kompatibilität mit den wichtigsten Browsern zu verbessern. Gears verfügt über eine integrierte SQLite-Datenbank und bietet Benutzern eine einheitliche API für den Zugriff auf die Datenbank Mit der Autorisierung kann jede Site Daten beliebiger Größe in der SQL-Datenbank speichern. Das Problem bei Gears ist, dass Google selbst diese nicht mehr verwendet.
Die schillernde Vielfalt an Technologien führt zu Problemen mit der Browserkompatibilität. Das, was hier wohl jeder am häufigsten verwendet, sind Cookies.
Neue Erfahrung in HTML5
Als Reaktion auf die oben genannten Probleme bietet HTML5 eine idealere Lösung: Wenn Sie lediglich ein Schlüssel/Wert-Paar speichern müssen, können Daten gelöst werden. Sie können Web Storage verwenden.
Im Vergleich zu Cookies bietet Web Storage viele Vorteile, die wie folgt zusammengefasst werden können:
1. Größerer Speicherplatz: Jeder unabhängige Speicherplatz unter IE8 ist 10 MB groß, und andere Browser haben etwas andere Implementierungen, sind aber viel größer als Cookie.
2. Der gespeicherte Inhalt wird nicht an den Server gesendet: Wenn ein Cookie gesetzt wird, wird der Cookie-Inhalt zusammen mit der Anfrage an den Server gesendet, was eine Verschwendung von Bandbreite für lokal gespeicherte Daten darstellt. Die Daten im Web Storage sind nur lokal vorhanden und interagieren in keiner Weise mit dem Server.
3. Umfangreichere und benutzerfreundlichere Schnittstellen: Web Storage bietet umfangreichere Schnittstellen, die den Datenbetrieb vereinfachen.
4. Unabhängiger Speicherplatz: Jede Domain (einschließlich Subdomains) verfügt über einen unabhängigen Speicherplatz. Jeder Speicherplatz ist völlig unabhängig, sodass es keine Datenverwirrung gibt.
Web Storage-Klassifizierung
Web Storage besteht eigentlich aus zwei Teilen: sessionStorage und localStorage.
sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden, und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene.
LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.
Überprüfen Sie, ob Web Storage unterstützt wird
Web Storage wird in allen gängigen Browsern unterstützt. Um jedoch mit älteren Browsern kompatibel zu sein, müssen Sie noch prüfen, ob diese Technologie verwendet werden kann.
Erster Weg: Überprüfen Sie, ob der Browser Web Storage unterstützt, indem Sie prüfen, ob das Storage-Objekt vorhanden ist:
if(typeof(Storage)!=="undefiniert"){
// Unterstützung für localStorage und sessionStorage! ..
} else {
// Sorry! Keine Web-Storage-Unterstützung..
}
if (typeof(localStorage) == 'undefiniert' ) {
alert('Ihr Browser unterstützt HTML5 localStorage nicht. Versuchen Sie ein Upgrade.'); Ja! Unterstützung für localStorage und sessionStorage! {
// Ja! Unterstützung für localStorage und sessionStorage! ;
}
oder
if (!!localStorage) {
// Ja! localStorage und sessionStorage-Unterstützung.....
} else {
alert('Ihr Browser unterstützt HTML5 localStorage nicht. Versuchen Sie ein Upgrade.');
Offensichtlich ist der erste Weg der direkteste und einfachste.
Nutzung von Web Storage
Web Storage speichert Schlüssel-Wert-Paare und der Browser speichert sie als Zeichenfolgen. Denken Sie daran, sie bei Bedarf in andere Formate zu konvertieren.
Mit Ausnahme unterschiedlicher Verwendungszwecke haben sessionStorage und localStorage dieselbe Mitgliederliste:
Code kopieren
Der Code lautet wie folgt folgt:
key = value: Schlüssel-Wert-Paar speichern
setItem(key, value): Schlüssel-Wert-Paar speichern
Kopieren Sie den Code
Der Code lautet wie folgt :
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman'
Zusätzlich beim Hinzufügen von Schlüsselwerten Paare, wenn die hinzugefügte Anzahl relativ groß ist, vergleichen Sie. Der sichere Weg besteht darin, zu überprüfen, ob eine Ausnahme vorliegt, die den Grenzwert überschreitet:
Kopieren Sie den Code
Der Code lautet wie folgt:
try {
localStorage.setItem(itemId, Values.join(';'));
} Catch (e) {
Code kopieren
Der Code lautet wie folgt:
< ;head>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Daten-Caching und lokaler Speicher-Erfahrungsaustausch bei der Vue-Projektentwicklung
Nov 03, 2023 am 09:15 AM
Erfahrungsaustausch über Daten-Caching und lokale Speicherung in der Vue-Projektentwicklung Im Entwicklungsprozess eines Vue-Projekts sind Daten-Caching und lokale Speicherung zwei sehr wichtige Konzepte. Daten-Caching kann die Anwendungsleistung verbessern, während lokaler Speicher eine dauerhafte Speicherung von Daten ermöglichen kann. In diesem Artikel werde ich einige Erfahrungen und Praktiken bei der Verwendung von Daten-Caching und lokaler Speicherung in Vue-Projekten teilen. 1. Daten-Caching Beim Daten-Caching werden Daten im Speicher gespeichert, sodass sie schnell abgerufen und später verwendet werden können. In Vue-Projekten gibt es zwei häufig verwendete Daten-Caching-Methoden:
Wo ist der Speicherordner?
Jan 12, 2021 pm 02:02 PM
Der Speicherordner befindet sich in der Dateiverwaltung: 1. Öffnen Sie direkt den Desktop des Mobiltelefons und klicken Sie auf „Systemwerkzeuge“. 3. Durchsuchen Sie alle Dateien Management.
So speichern und verwalten Sie Daten lokal in Vue-Projekten
Oct 08, 2023 pm 12:05 PM
Die lokale Speicherung und Verwaltung von Daten im Vue-Projekt ist sehr wichtig. Sie können die vom Browser bereitgestellte lokale Speicher-API verwenden, um eine dauerhafte Speicherung von Daten zu erreichen. In diesem Artikel wird die Verwendung von localStorage in Vue-Projekten zur lokalen Speicherung und Verwaltung von Daten vorgestellt und spezifische Codebeispiele bereitgestellt. Daten initialisieren Im Vue-Projekt müssen Sie zunächst die Daten initialisieren, die lokal gespeichert werden müssen. Sie können die Anfangsdaten in der Datenoption der Vue-Komponente definieren und prüfen, ob sie über die erstellte Hook-Funktion erstellt wurden
So verwenden Sie den lokalen Speicher localStorage in der Uniapp-Implementierung
Oct 21, 2023 am 09:36 AM
Für die Verwendung des lokalen Speichers „localStorage“ in uniapp sind bestimmte Codebeispiele erforderlich. Bei der Entwicklung mobiler Anwendungen ist es häufig erforderlich, einige Daten im lokalen Speicher zu speichern, damit sie beim nächsten Öffnen der Anwendung schnell abgerufen werden können. In uniapp können Sie localStorage verwenden, um lokale Speicherfunktionen zu implementieren. In diesem Artikel wird die Verwendung von localStorage in uniapp vorgestellt und spezifische Codebeispiele bereitgestellt. uniapp ist eine Reihe plattformübergreifender Entwicklungen, die auf Vue.js basieren
Enthüllen Sie die Hauptverwendungszwecke von localstorage: Welchen Komfort bringt es uns?
Jan 13, 2024 pm 12:39 PM
Der Hauptzweck von localstorage offenbarte sich: Welche Annehmlichkeiten bietet es uns? In der modernen Webentwicklung müssen Frontend-Entwickler häufig einige Daten speichern, damit der Zustand der Daten erhalten bleibt, nachdem der Benutzer die Seite geschlossen hat. Um dieses Problem zu lösen, hat HTML5 eine sehr nützliche Funktion eingeführt: Localstorage. Es handelt sich um eine API, die Daten dauerhaft im Browser des Benutzers speichert. Sie bietet eine praktische Bedienoberfläche, sodass Entwickler Daten problemlos im Frontend speichern können. Also, Ort
Vergleichende Analyse von fünf verschiedenen Arten der lokalen Speicherung zur Verbesserung der Datenspeichereffizienz
Jan 13, 2024 am 08:47 AM
Verbesserung der Datenspeichereffizienz: Vergleichende Analyse von fünf verschiedenen Methoden der lokalen Speicherung. Einführung: Im heutigen Zeitalter der Informationsexplosion sind Datenspeicherung und -verwaltung besonders wichtig geworden. Bei der Webentwicklung müssen wir häufig einige Daten für die Verwendung auf verschiedenen Seiten oder Sitzungen speichern. Eine der am weitesten verbreiteten Methoden zur Datenspeicherung ist die Verwendung von Localstorage. Localstorage ist ein von HTML5 bereitgestellter lokaler Speichermechanismus, der Daten dauerhaft im Browser speichern kann. es basiert auf Schlüsseln
So verwenden Sie Vue für Daten-Caching und lokale Speicherung
Aug 03, 2023 pm 02:33 PM
So verwenden Sie Vue für Daten-Caching und lokale Speicherung. In der Front-End-Entwicklung müssen wir häufig Daten-Caching und lokale Speicherung durchführen. Als beliebtes JavaScript-Framework bietet Vue einige einfache und benutzerfreundliche Methoden zur Implementierung dieser Funktionen. In diesem Artikel wird die Verwendung von Vue für das Daten-Caching und die lokale Speicherung vorgestellt und entsprechende Codebeispiele bereitgestellt. Daten-Caching Unter Daten-Caching versteht man das Speichern von Daten im Speicher, damit sie bei nachfolgenden Vorgängen schnell abgerufen werden können. Vue stellt ein globales Daten-Cache-Objekt $data bereit, das wir können
Entdecken Sie die Funktionen und Vorteile von SessionStorage
Jan 11, 2024 pm 03:16 PM
Einführung in SessionStorage: Um seine Verwendung und Vorteile zu verstehen, sind spezifische Codebeispiele erforderlich. Einführung: In der Webentwicklung müssen wir häufig Benutzerinformationen und temporäre Daten speichern und verwalten. Um dieses Problem zu lösen, führt HTML5 eine neue API ein: SessionStorage. In diesem Artikel werden die Konzepte, Verwendungsmöglichkeiten und Vorteile von SessionStorage vorgestellt und einige spezifische Codebeispiele gegeben, um den Lesern ein besseres Verständnis zu erleichtern. 1. Was ist SessionStorage?
