Commentaire: Cet article présente principalement les exemples d'utilisation simples de LocalStorage, de la base de données locale et de SessionStorage dans le stockage local HTML5. Les amis qui en ont besoin peuvent y faire référence.
Une fonctionnalité très cool de HTML5 est le stockage Web, similaire aux cookies précédents, mais la différence est que le stockage Web a une capacité locale de 5 mégaoctets à stocker, tandis que les cookies ont uniquement 4K, ce qui est un avantage qui ne peut pas être comparé.
WebStrange est en outre divisé en: LocalStorage, SessionStorage et la base de données locale.
Ensuite, je vais le présenter un par un:
1. Localstorage
L'utilisation de LocalStorage est relativement simple et les méthodes sont:
localStorage.SetItem (clé, valeur); // Enregistrer les données
localStorage.getItem (clé); // lire les données
localStorage.RemoveItem (clé); // supprimer les données individuelles
localStorage.clear (); // supprimer toutes les données
Clé: localStorage.key (index); // Obtenez la valeur d'un certain index
Une petite démo pour montrer la fonction:
(fonction ($) {
$ (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);
}autre{
serializeObj [this.name] = [serializeObj [this.name], this.value];
}
}autre{
serializeObj [this.name] = this.value;
}
});
return serializeObj;
}; </p> <p> var StorageFile = JSON.Parse (Window.LocalStorage.getItem ('Demo'));
$ .each (StorageFile, fonction (i, val) {
$ ('# Demoform'). trouver ('[name = "' + i + '"]'). Val (val);
}); </p> <p> $ ('# Demoform'). Rechercher ('[type = "soumettre"]'). On ('click', function () {
var data = $ ('# DeMOFORM'). getFormParam ();
Window.LocalStorage.SetItem («Demo», JSON.StRINGIFY (données));
retourne false;
});
});
}) (jQuery)
Code html:
<! doctype html>
<html lang = "zh">
<adal>
<meta charset = "utf-8">
<script src = "jQuery-1.10.2.min.js"> </ script>
<script src = "Demo.js"> </ script>
<Title> Document </Title>
</ head>
<body>
<formulaire
<p> <label> <span> Nom </span> <preny> </ label> </p>
<p> <bablow> <span> Âge </span> <fort> </ label> </p>
<p> <Babed> <span> Numéro d'étudiant </span> <fort> </bable> </p>
<p> <label> <span> Adresse </span> <fort> </ label> </p>
<p> <Babed> <Span> Hobbies </span> <fort> </ label> </p>
<p> <Babel> <span> Autre </span> <textarea cols = "30" rows = "10"> </ textArea> </ Label> </p>
<p> <input type = "soumi" value = "soumi"> </p>
</ form>
</docy>
</html>
De cette façon, une simple démo qui montre localstorage est implémentée
2. SessionStorage
L'utilisation de SessionStorage est la même que celle de LocalStorage, mais SessionStorage sera effacée lorsque le navigateur fermera le site Web, et LocalStorage sera enregistré au navigateur, et les deux seront utilisés ensemble le cas échéant.
3. Base de données locale
Les étudiants qui connaissent le développement iOS / Android devraient être plus familiers avec les bases de données SQLite
Le fonctionnement de la base de données dans HTML5 est relativement simple, y compris principalement la méthode OpenDatabase et la méthode de transaction
Utilisez un objet DB pour recevoir des objets créés par OpenDatabase pour accéder à la base de données
var db = openDatabase (databasename, version, description, taille)
dans
Databasename: nom de base de données
Version: La version de la base de données peut être ignorée
Description: Base de données Description
Taille: la base de données allouée à la taille de l'espace
La méthode de transaction utilise une fonction de rappel comme paramètre pour exécuter une méthode spécifique pour accéder à la base de données dans la fonction.
db.transaction (fonction (tx)) {
tx.ExECUTESQL (SqlQuery, [Value1, Value2 ..], Datahandler, ErrorHandler)
});
Les quatre paramètres de la méthode ExecuteSQL sont:
Instructions SQLQuery: SQL qui doivent être exécutées spécifiquement, créez || SELECT || Update || Delete;
[Value1, Value2 ..]: un tableau de tous les paramètres utilisés dans l'instruction SQL. Dans la méthode ExecuteSQL, les paramètres à utiliser dans l'instruction SQL sont remplacés par?
Datahandler: exécuter une fonction de rappel réussie;
ErrorHandler: la fonction de rappel n'a pas réussi à s'exécuter;