Heim > Artikel > Web-Frontend > 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
- WBOYOriginal
- 2016-05-16 15:50:011393Durchsuche
Warum müssen wir Daten auf dem Client speichern?
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..
}
Die zweite Möglichkeit besteht darin, die jeweiligen Objekte separat zu prüfen, z ob localStorage Folgendes unterstützt:
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>
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:
Code kopieren
Der Code lautet wie folgt:if(typeof(Storage)!=="undefiniert"){
// Unterstützung für localStorage und sessionStorage! ..
} else {
// Sorry! Keine Web-Storage-Unterstützung..
}
Kopieren Sie den CodeDer Code lautet wie folgt:
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
getItem(key): Schlüssel-Wert-Paar abrufen
removeItem(key ): Alle Schlüssel-Wert-Paare entfernenclear(): Alle Schlüssel-Wert-Paare löschenlength: Die Anzahl der Schlüssel-Wert-Paare
Es sollte hervorgehoben werden Hier: Die Methode setItem(key,value) kann theoretisch ein beliebiger Typ sein, aber tatsächlich ruft der Browser die toString-Methode des Wertes auf, um seinen Zeichenfolgenwert abzurufen und ihn lokal zu speichern. Wenn es sich also um einen benutzerdefinierten Typ handelt, müssen Sie ihn definieren eine sinnvolle toString-Methode. Beispielsweise wird das folgende Beispiel in Kombination mit JSON.stringify verwendet: 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'
/**
* JSON.stringify, JSON-Daten in String konvertieren * JSON.stringify({'name': 'fred', 'age': 24}); // '{"name": "fred ", "age":24}' * JSON.stringify(['a', 'b', 'c']); // '["a", "b", "c"]' * JSON.parse, reverse JSON.stringify * JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/ 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) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'Kontingent überschritten!'); } Die Methode von Web Storage ist sehr einfach Beispiel zählt die Anzahl der Schaltflächenklicks:
Code kopieren
Der Code lautet wie folgt:
< ;head>
- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen