Kommentar: In diesem Artikel wird hauptsächlich die einfachen Verwendungsbeispiele für lokale Storage, lokale Datenbank und SessionStorage in HTML5 lokalem Speicher vorgestellt. Freunde, die es brauchen, können sich darauf beziehen.
Eine sehr coole Funktion von HTML5 ist der Webspeicher, ähnlich wie bei früheren Cookies. Der Unterschied besteht jedoch darin, dass der Webspeicher eine lokale Kapazität von 5 Megabyte zum Speichern hat, während Cookies nur 4K haben, was ein Vorteil ist, der nicht verglichen werden kann.
Webstrange ist weiter unterteilt in: LocalStorage, SessionStorage und Local Database.
Als nächstes werde ich es nacheinander vorstellen:
1. LOCALSTORAGE
Die Verwendung von LocalStorage ist relativ einfach und die Methoden sind:
localStorage.setItem (Schlüssel, Wert); // Daten speichern
localStorage.getItem (Schlüssel); // Daten lesen
LocalStorage.RemoveItem (Schlüssel); // Löschen einzelner Daten
LocalStorage.Clear (); // Alle Daten löschen
Schlüssel: LocalStorage.Key (Index); // Erhalten Sie den Wert eines bestimmten Index
Eine kleine Demo, um die Funktion zu zeigen:
(Funktion ($) {
$ (function () {
$ .fn.getFormparam = function () {
var SerializeObj = {};
var array = this.serializearray ();
var str = this.serialize ();
$ (Array) .each (function () {
if (serializeobj [this.name]) {
if ($. isArray (serializeobj [this.name])) {
serializeobj [this.name] .push (this.Value);
}anders{
serializeObj [this.name] = [serializeObj [this.name], this.value];
}
}anders{
serializeObj [this.name] = this.Value;
}
});
return serializeobj;
}.
$ .each (StorageFile, Funktion (i, val) {
$ ('#Demoform'). Find ('[name = "'+i+'"]). Val (Val);
}).
var data = $ ('#Demoform'). getFormparam ();
window.localStorage.setItem ('Demo', json.stringify (data));
false zurückgeben;
});
});
}) (jQuery)
HTML -Code:
<! docType html>
<html lang = "zh">
<kopf>
<meta charset = "utf-8">
<script src = "jQuery-1.10.2.min.js"> </script>
<script src = "Demo.js"> </script>
<title> document </title>
</head>
<body>
<form>
<p> <label> <span> Name </span> <eingabe> </label> </p>
<p> <label> <span> Alter </span> <eingabe> </label> </p>
<p> <label> <Pan> Schülernummer </span> <eingabe> </label> </p>
<p> <label> <Pan> Adresse </span> <eingabe> </label> </p>
<p> <label> <span> Hobbys </span> <eingabe> </label> </p>
<p> <label> <span> Andere </span> <textarea cols = "30" rows = "10"> </textarea> </label> </p>
<p> <Eingabe type = "subieren" value = "enden"> </p>
</form>
</body>
</html>
Auf diese Weise wird eine einfache Demo implementiert, die LocalStorage zeigt
2. SessionStorage
Die Verwendung von SessionStorage entspricht der von LocalStorage, aber SessionStorage wird gelöscht, wenn der Browser die Website schließt, und LocalStorage wird im Browser gespeichert und beide werden gegebenenfalls gemeinsam verwendet.
3. Lokale Datenbank
Schüler, die mit iOS/Android -Entwicklung vertraut sind, sollten mit SQLite -Datenbanken besser vertraut sein
Der Betrieb der Datenbank in HTML5 ist relativ einfach und enthält hauptsächlich die Opendatabase -Methode und die Transaktionsmethode
Verwenden Sie ein Objekt DB, um Objekte zu empfangen, die von Opendatabase erstellt wurden, um auf die Datenbank zuzugreifen
var db = opendatabase (Datenbankname, Version, Beschreibung, Größe)
In
Datenbankname: Datenbankname
Version: Die Datenbankversion kann ignoriert werden
Beschreibung: Datenbank Beschreibung
Größe: Die Datenbank hat die Raumgröße zugewiesen
Die Transaktionsmethode verwendet eine Rückruffunktion als Parameter, um eine bestimmte Methode auszuführen, um auf die Datenbank in der Funktion zuzugreifen.
db.transaction (function (tx)) {
tx.executesql (SQLQuery, [Value1, Value2 ..], Datahandler, ERRORHANDLER)
});
Die vier Parameter der ExecutesQL -Methode sind:
SQLQuery: SQL -Anweisungen, die speziell ausgeführt werden müssen, || SELECT || UPDATE || Delete;
[value1, value2 ..]: Ein Array aller in der SQL -Anweisung verwendeten Parameter. In der ExecutesQL -Methode werden die Parameter in der SQL -Anweisung zuerst durch? Ersetzt, und dann werden diese Parameter nacheinander aus einem Array zusammengesetzt und im zweiten Parameter platziert.
Datahandler: Durchführende Rückruffunktion ausführen;
ERRORHANDLER: Die Rückruffunktion konnte nicht ausgeführt werden.