Raid on HTML5 Javascript API Extension 3 – eine neue Erfahrung mit lokalen Storage_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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:

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..
}

Die zweite Möglichkeit besteht darin, die jeweiligen Objekte separat zu prüfen, z ob localStorage Folgendes unterstützt:

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>

;/p>

< /div>Klicken Sie auf die Schaltfläche, um den Zähler zu sehen.

Schließen Sie den Browser-Tab (oder das Fenster) und versuchen Sie es erneut. Der Zähler zählt weiter (wird nicht zurückgesetzt).

Im obigen Beispiel können Sie localStorage durch sessionStorage ersetzen, ein paar Mal auf die Schaltfläche klicken und den Effekt vor und nach dem Schließen des Browsers überprüfen.
Bestehende Probleme
Die Mängel von Web Storage liegen hauptsächlich in der Sicherheit, die sich insbesondere in den folgenden zwei Punkten widerspiegelt:
1. Der Browser weist jeder Domain unabhängigen Speicher zu Das heißt, das Skript in Domäne A kann nicht auf den Speicherplatz in Domäne B zugreifen, der Browser prüft jedoch nicht, ob die Domäne, in der sich das Skript befindet, mit der aktuellen Domäne übereinstimmt. Das heißt, ein in Domäne A in Domäne B eingebettetes Skript kann weiterhin auf die Daten in Domäne B zugreifen.
2. Lokal gespeicherte Daten sind nicht verschlüsselt und verfallen nie, was leicht zu Datenschutzverlusten führen kann.
Weitere sicherheitsrelevante Fragen finden Sie außerdem unter den Links in der praktischen Referenz unten.
Liste anderer Spezifikationen (nur zur Information, vielleicht wird es irgendwann weg sein)
Webdatenbank
Im alten HTML5-Vorschlag können Sie es verwenden, wenn Sie komplexe Daten speichern müssen Web Database kann SQL wie ein Client-Programm verwenden (der Web Database-Standard wurde aufgegeben, daher werde ich ihn hier kurz erwähnen);
globalStorage
Dies wird auch in HTML5 vorgeschlagen und in der Browser In Zukunft können die mit globalStorage gespeicherten Informationen weiterhin beibehalten werden. Ebenso wie mit localStorage können die auf jeder Seite in der Domäne gespeicherten Informationen von allen Seiten gemeinsam genutzt werden, derzeit wird dies jedoch nur von FireFox unterstützt.
Grundlegende Syntax:
• globalStorage['developer.mozilla.org'] – Alle Subdomains unter Developer.mozilla.org können über dieses Namespace-Speicherobjekt lesen und schreiben.
• globalStorage['mozilla.org'] – Alle Webseiten unter dem Domänennamen mozilla.org können über dieses Namespace-Speicherobjekt gelesen und geschrieben werden.
• globalStorage['org'] – Alle Webseiten unter dem Domänennamen .org können über dieses Namespace-Speicherobjekt gelesen und geschrieben werden.
• globalStorage[''] – Jede Webseite unter einem beliebigen Domänennamen kann über dieses Namespace-Speicherobjekt lesen und schreiben.
Methodenattribute:
• setItem(key, value) – Den Schlüsselwert festlegen oder zurücksetzen.
• getItem(key) – Schlüsselwert abrufen.
• removeItem(key) – Entfernen Sie den Schlüsselwert.
• Schlüsselwert festlegen: window.globalStorage["planabc.net"].key = value;
• Schlüsselwert abrufen: value = window.globalStorage["planabc.net"].key; Funktionen:
• Die Ablaufzeit ist die gleiche wie bei localStorage, und einige andere Funktionen ähneln auch localStorage.
• Derzeit unterstützt Firefox nur den globalen Speicher unter der aktuellen Domäne. Wenn Sie die öffentliche Domäne verwenden, wird ein Fehler ähnlich dem „Sicherheitsfehler“-Code „1000“ verursacht.

IndexedDB Das Letzte, was wir vorstellen möchten, ist IndexedDB. Im Vergleich zu den anderen beiden Spezifikationen implementiert derzeit nur Firefox IndexedDB (Mozilla hat übrigens gesagt, dass sie niemals Web SQL Database implementieren werden). , aber Google hat erklärt, dass es erwägt, IndexDB-Unterstützung zu Chrome hinzuzufügen.
IndexedDB führt das Konzept eines Objektspeichers ein, der ein bisschen wie eine SQL-Datenbank ist. Sie können „Datensätze“ in der „Datenbank“ speichern, und jeder „Datensatz“ kann viele „Felder“ haben, jedes Feld hat Für einen Wenn Sie einen bestimmten Datentyp verwenden, können Sie eine Teilmenge von Datensätzen auswählen und diese mit dem „Cursor“ durchlaufen. Alle Änderungen im Objektspeicher basieren auf „Transaktionen“.
Weitere Informationen finden Sie später in der Dokumentation zu IndexedDB in FireFox in der Nutzungsreferenz.

Praktische Referenz: Offizielle Dokumentation:
http://www.w3schools.com/html5/Script House:
http:// www .jb51.net/w3school/html5/Lokale Speichersicherheit:
http://www.mhtml5.com/2012/03/4586.htmlFireFox Experimental-Funktion IndexedDB: https://developer.mozilla.org/en-US/docs/IndexedDB