RAID HTML5: JavaScript -API -Erweiterung 3 - Eine neue Erfahrung im lokalen Speicherplatz

Das Speichern von Daten auf dem Kunden kann viele Probleme lösen und unnötige Datenübertragung reduzieren:

1. kann den Status des Programms speichern: Der Benutzer kann wissen, wo er nach dem Schließen des Browsers und dem Öffnen arbeitet.

2. können Daten zwischenspeichern: Es ist nicht erforderlich, viele Daten zu erhalten, die sich nicht jedes Mal vom Server ändern.

3. kann Benutzereinstellungen speichern: Diese Art von Daten muss normalerweise nicht auf dem Server vorhanden sein.

Vor dem HTML5 -Lokalspeicher gibt es, wenn wir anhaltende Daten zum Client sparen möchten, mehrere Optionen:

1. Http Cookies. Der Nachteil von HTTP -Cookies ist offensichtlich. Sie können nur bis zu 4 KB Daten speichern, und jede HTTP -Anforderung wird an den Server zurückgesandt und einfacher Text übertragen (es sei denn, Sie verwenden SSL).

2. dh userData. UserData ist eine lokale Speicherlösung, die von Microsoft während des Browserkrieges in den 1990er Jahren gestartet wurde. Es verwendet das Verhaltensattribut von DHTML, um lokale Daten zu speichern, sodass jede Seite bis zu 64.000 Daten und bis zu 640.000 Daten pro Site speichern kann. Die Nachteile von UserData sind offensichtlich. Es ist nicht Teil des Webstandards. Wenn Ihr Programm nicht nur den IE unterstützen muss, ist es im Grunde genommen nutzlos.

3. Flash Cookies. Flash Cookies sind eigentlich nicht die gleichen wie HTTP -Cookies. Vielleicht sollte sein Name lokaler Speicher des lokalen Speichers sein. Mit Flash -Cookies kann jeder Site die Daten standardmäßig nicht mehr als 100.000 speichern. Wenn es es überschreitet, fordert Flash automatisch einen größeren Speicherplatz vom Benutzer an. Mit der externen Schnittstelle von Flash können Sie den lokalen Speicher von Flash problemlos über JavaScript bedienen. Das Problem mit Flash ist sehr einfach, da es Blitz ist.

4. Google Gears. Gears ist ein Open-Source-Browser-Plug-In, das 2007 von Google veröffentlicht wurde, um die Kompatibilität von großen Browsern zu verbessern. Gears verfügt über eingebautes eingebettete SQL-Datenbank basierend auf SQLite und bietet eine einheitliche API für den Zugriff auf die Datenbank. Nach Erhalt der Benutzergenehmigung kann jede Website unbegrenzte Daten in der SQL -Datenbank speichern. Das Problem von Gears ist, dass Google selbst es nicht mehr verwendet.

Die schillernde Vielfalt der Technologien führt zu Problemen mit Browserkompatibilität. Die häufigsten Kekse hier können Kekse sein.

Als Reaktion auf die oben genannten Probleme bietet HTML5 eine idealere Lösung: Wenn Sie Daten speichern müssen, die einfach durch Verwendung von Schlüssel-/Wertpaaren gelöst werden können, können Sie den Webspeicher verwenden.

Im Vergleich zu Cookies hat der Webspeicher viele Vorteile, die wie folgt zusammengefasst sind:

1. Größerer Speicherplatz: Jeder unabhängige Speicherplatz unter IE8 beträgt 10 m, und andere Browser haben leicht unterschiedliche Implementierungen, aber sie sind viel größer als Cookies.

2. Der gespeicherte Inhalt wird nicht an den Server gesendet: Wenn ein Cookie festgelegt ist, wird der Inhalt des Cookies zusammen mit der Anfrage auf dem Server gesendet, was eine Bandbreite für lokal gespeicherte Daten darstellt. Die Daten im Webspeicher existieren nur lokal und interagieren nicht mit dem Server.

3.. Weitere und benutzerfreundlichere Schnittstellen: Der Webspeicher bietet eine reichhaltigere Reihe von Schnittstellen, wodurch die Datenoperation erleichtert wird.

4. Unabhängiger Speicherplatz: Jede Domäne (einschließlich Subdomain) verfügt über einen unabhängigen Speicherplatz, und jeder Speicherplatz ist völlig unabhängig, sodass sie keine Datenverwirrung verursachen.

Webspeicher besteht tatsächlich aus zwei Teilen: SessionStorage und LocalStorage.

SessionStorage wird verwendet, um Daten in einer Sitzung lokal zu speichern, auf die nur auf den Seiten derselben Sitzung zugegriffen werden kann, und die Daten werden nach Abschluss der Sitzung zerstört. SessionStorage ist daher kein anhaltender lokaler Speicher, sondern nur ein Speicher auf Sitzungsebene.

LocalStorage wird für den anhaltenden lokalen Speicher verwendet, und die Daten werden niemals verfallen, es sei denn, sie werden aktiv gelöscht.

Der Webspeicher wird in wichtigen Mainstream -Browsern unterstützt, aber um mit alten Browsern kompatibel zu sein, müssen wir noch überprüfen, ob diese Technologie verwendet werden kann.

Die erste Methode: Überprüfen Sie, ob der Browser den Webspeicher unterstützt, indem Sie überprüfen, ob das Speicherobjekt vorhanden ist:

if (typeof (speicher)! == "undefined") {

// Ja! LocalStorage und SessionStorage Support!

// ein Code ...

} anders {

// Entschuldigung! Kein Webspeicherunterstützung ..

}

Der zweite Weg besteht darin, die jeweiligen Objekte getrennt zu überprüfen, z. B. überprüft, ob LocalStorage sie unterstützt:

if (typeof (localStorage) == 'undefined') {

ALERT ('Ihr Browser unterstützt HTML5 LocalStorage nicht. Versuchen Sie es mit Upgrade.');

} anders {

// Ja! LocalStorage und SessionStorage Support!

// ein Code ...

}

oder:

if ('localStorage' im Fenster && Fenster ['localStorage']! == null) {

// Ja! LocalStorage und SessionStorage Support!

// ein Code ...

} anders {

ALERT ('Ihr Browser unterstützt HTML5 LocalStorage nicht. Versuchen Sie es mit Upgrade.');

}

oder

if (!! localStorage) {

// Ja! LocalStorage und SessionStorage Support!

// ein Code ...

} anders {

ALERT ('Ihr Browser unterstützt HTML5 LocalStorage nicht. Versuchen Sie es mit Upgrade.');

}

Offensichtlich ist die erste Methode die direkteste und einfachste Methode.

Webspeicher speichert Schlüsselwertpaare und der Browser speichert es als Zeichenfolge. Denken Sie daran, sie bei Bedarf in andere Formate umzuwandeln.

Mit Ausnahme der unterschiedlichen Verwendungen von SessionStorage und LocalStorage ist die Mitgliedsliste dieselbe:

Key = Wert: Schlüsselwertpaare speichern

setItem (Schlüssel, Wert): Sparen Sie Schlüsselwertpaare

GetItem (Schlüssel): Holen Sie sich das Schlüsselwertpaar

REMETIGEM (Schlüssel): Entfernen Sie alle Schlüsselwertpaare

Clear (): Alle Schlüsselwertpaare löschen

Länge: Die Anzahl der Schlüsselwertpaare

Hier müssen wir immer noch betonen: Der Werttyp in der Methode SetItem (Schlüssel, Wert) kann theoretisch von jedem Typ sein, aber der Browser ruft jedoch die Value -ToString -Methode auf, um seinen Stringwert zu erhalten und ihn lokal zu speichern. Wenn es sich um einen benutzerdefinierten Typ handelt, müssen Sie sich daher selbst eine aussagekräftige ToString -Methode definieren. Beispielsweise wird das folgende Beispiel in Verbindung mit JSON.Stringify verwendet:

var Person = {'Name': 'Rainman', 'Alter': 24};

localStorage.setItem ("me", json.stringify (Person));

Json.parse (localStorage.getItem ('me')). Name; // 'Rainman'

/**

* JSON.Stringify, konvertieren Sie JSON -Daten in Zeichenfolgen

* Json.stringify ({'name': 'fred', 'ay': 24}); // '{"Name": "Fred", "Alter": 24}'

* Json.Stringify (['a', 'b', 'c']); // '["a", "b", "c"]'

* Json.Parse, Anti-Solving Json.Stringify

* Json.parse ('["a", "b", "c"]') // ["a", "b", "c"]

*/

Bei der Hinzufügung von Schlüsselwertpaaren ist es außerdem sicherer zu prüfen, ob es Ausnahmen gibt, die die Grenze überschreiten:

versuchen {

localStorage.setItem (itemId, values.join (';'));

} catch (e) {

if (e == quota_exceeded_err) {

ALERT ('Quote übertroffen!');

}

}

Die Methode des Webspeichers ist sehr einfach. Das folgende Beispiel besteht darin, die Anzahl der Klicks auf die Schaltfläche zu zählen:

<! DocType html>

<html>

<kopf>

<Script>

Funktion ClickCounter ()

{

if (typeof (speicher)! == "undefined")

{

if (localStorage.clickcount)

{

localStorage.clickcount = number (localStorage.clickcount) +1;

}

anders

{

LocalStorage.ClickCount = 1;

}

document.getElementById ("Ergebnis"). InnerHtml = "Sie haben auf die Schaltfläche" + localStorage.ClickCount + "-Time (n) geklickt.

}

anders

{

document.getElementById ("Ergebnis"). Innerhtml = "Entschuldigung, Ihr Browser unterstützt keinen Webspeicher ...";

}

}

</script>

</head>

<body>

<p> <schalttaste onclick = "clickCounter ()" type = "button"> klicken Sie auf mich! </button> </p>

<div id = "result"> </div>

<p> Klicken Sie auf die Schaltfläche, um die Zählerzunahme zu sehen. </p>

<p> Schließen Sie die Registerkarte Browser (oder das Fenster) und versuchen Sie es erneut, und der Zähler zählt weiter (wird nicht zurückgesetzt). </p>

</body>

</html>

Im obigen Beispiel können Sie LocalStorage in SessionStorage ändern, mehrmals auf die Schaltfläche klicken und den Effekt vor und nach dem Schließen des Browsers überprüfen.

Die Mängel des Webspeichers konzentrieren sich hauptsächlich in der Sicherheit, die sich in den folgenden zwei Punkten widerspiegeln:

1. Der Browser bereitstellt für jede Domäne einen unabhängigen Speicherplatz, dh das Skript kann nicht auf den Speicherplatz in Domain B in Domäne A zugreifen, aber der Browser prüft nicht, ob die Domäne, in der sich das Skript befindet, mit der aktuellen Domäne übereinstimmt. Das heißt, Skripte, die in Domäne A in Domäne B eingebettet sind, können weiterhin auf die Daten in Domäne B zugreifen

2. Die lokal gespeicherten Daten sind nicht verschlüsselt und werden niemals auslaufen, was sehr einfach zu Leckagen zu Datenschutz zu führen ist.

Darüber hinaus finden Sie später auf den Link in der praktischen Referenz später für sicherere Probleme.

Wenn Sie im alten HTML5 -Vorschlag komplexe Daten speichern müssen, können Sie die Webdatenbank verwenden, die SQL wie ein Client -Programm verwenden kann (der Webdatenbankstandard wurde aufgegeben. Hier ist hier eine kurze Erwähnung).

Dies wird auch in HTML5 vorgeschlagen. Nachdem der Browser geschlossen wurde, können die mit GlobalStorage gespeicherten Informationen weiterhin erhalten bleiben. Wie bei LocalStorage können die auf jeder Seite in der Domäne gespeicherten Informationen von allen Seiten gemeinsam genutzt werden, aber derzeit unterstützt es nur Firefox.

Grundlegende Syntax:

• GlobalStorage ['Developer.mozilla.org'] - Alle Subdomains unter Developer.mozilla.org können über dieses Namespace -Speicherobjekt gelesen und geschrieben werden.

• GlobalStorage ['Mozilla.org'] - Alle Webseiten unter dem Domain -Namen von Mozilla.org können über dieses Namespace -Speicherobjekt gelesen und geschrieben werden.

• GlobalStorage ['org'] - Alle Webseiten unter dem Namen .org -Domain können über dieses Namespace -Speicherobjekt gelesen und geschrieben werden.

• GlobalStorage [''] - Jede Webseite unter einem beliebigen Domänennamen kann über dieses Namespace -Speicherobjekt gelesen und geschrieben werden.

Methodeneigenschaften:

• SetItem (Schlüssel, Wert) - Setzen oder setzen Sie den Schlüsselwert zurück.

• GetItem (Schlüssel) - Ruft den Schlüsselwert ab.

• REMEDITEM (Schlüssel) - entfernt den Schlüsselwert.

• Setzen Sie den Schlüsselwert: Fenster.GlobalStorage [planabc.net] .Key = Wert;

• Den Schlüsselwert erhalten: value = window.globalStorage [planabc.net] .Key;

Andere Funktionen:

• Die Ablaufzeit entspricht der Lokalstorage, und einige andere Funktionen ähneln auch Lokalstorage.

• Firefox unterstützt nun nur die GlobalStorage -Speicherung unter der aktuellen Domäne. Die Verwendung einer gemeinsamen Domäne verursacht einen ähnlichen Fehlersicherheitsfehlercode: 1000.

Schließlich möchten wir IndexedDB vorstellen. Im Vergleich zu den beiden anderen Spezifikationen implementiert derzeit nur Firefox IndexedDB (übrigens, Mozilla, sie werden niemals die Web -SQL -Datenbank implementieren).

IndexedDB führt das Konzept eines Objektspeichers ein, das ein bisschen wie eine SQL-Datenbank ähnelt, in der Sie Datensätze in der Datenbank speichern können. Jeder Datensatz kann viele Felder haben. Jedes Feld verfügt über einen bestimmten Datentyp.

Weitere Informationen finden Sie in der Dokumentation zu IndexedDB in Firefox in der Verwendungsreferenz später.

Offizielles Dokument: http://www.w3schools.com/html5/

Vorlage Sorgen: http://www.cuoxin.com/w3school/html5/

Sicherheit des lokalen Speichers: http://www.mhtml5.com/2012/03/4586.html

Die experimentellen Funktionen von Firefox IndexedDB: https://developer.mozilla.org/en-us/docs/indexeddbbb