Dans l'article précédent "HTML5 Local Storage: Web Storage", il présente brièvement comment utiliser LocalStorage pour implémenter le stockage local; En fait, en plus de SessionStorage et LocalStorage, HTML5 prend également en charge le stockage de données local via des bases de données locales. HTML5 utilise une base de données de type fichier tel que SQLite, qui est principalement concentrée sur les appareils embarqués. Les étudiants qui connaissent le développement iOS / Android devraient être familiers avec les bases de données SQllite.
Le fonctionnement de la base de données dans HTML5 est relativement simple, avec deux fonctions principales:
1. Créez un objet pour accéder à la base de données via la méthode OpenDatabasevar db = openDatabase (databasename, version, description, taille)
Cette méthode a quatre paramètres et ses fonctions sont:
Databasename: nom de base de données;
Version: Numéro de version de la base de données, pas de remplissage;
Description: Description de la base de données;
Taille: la taille de l'espace alloué à la base de données;
2. Utilisez l'objet d'accès à la base de données (tel que DB) créé dans la première étape pour exécuter la méthode de transaction pour effectuer un traitement de transactiondb.transaction (fonction (tx)) {
// Exécuter l'instruction pour accéder à la base de données
});
La méthode de transaction utilise une fonction de rappel comme paramètre, dans lequel le fonctionnement spécifique de l'accès à la base de données est effectué;
3. Exécuter la requête via la méthode ExecuteSQLtx.ExECUTESQL (SqlQuery, [Value1, Value2 ..], Datahandler, ErrorHandler)
La méthode EXECUTESQL a quatre paramètres, et ses fonctions sont les suivantes:
SQLQuery: les instructions SQL qui doivent être exécutées spécifiquement peuvent être créées, sélectionnées, mise à jour et supprimer;
[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? Tout d'abord, puis ces paramètres sont composés d'un tableau à tour et placé dans le deuxième paramètre;
Datahandler: la fonction de rappel qui est appelée avec succès, par laquelle l'ensemble de résultats de requête peut être obtenu;
ErrorHandler: la fonction de rappel appelée lorsque l'exécution échoue;
Cet article utilise la prise en charge de la base de données HTML5 pour réimpliquer la gestion du livre d'adresses dans l'article précédent. Les fonctions à implémenter sont les suivantes:
Les contacts peuvent être créés et enregistrés dans la base de données. Les champs de contact incluent: nom, numéro de téléphone portable, entreprise, temps de création;
Liste toutes les coordonnées actuellement enregistrées;
Vous pouvez supprimer des coordonnées spécifiques;
De même, préparez d'abord une page HTML, comme suit :<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<Title> HTML5 Base de données locale locale </TITAL>
<style>
.adddiv {
Border: 2px en pointillé #ccc;
Largeur: 400px;
Texte-aligne: Centre;
}
</ style>
</ head>
<body onload = "loadall ()">
<div>
<label for = "user_name"> name: </ label>
<input type = "text" id = "user_name" name = "user_name" />
<br/>
<étiquette pour = "MobilePhone"> Téléphone mobile: </ Label>
<input type = "text" id = "mobilephone" name = "mobilephone" />
<br/>
<étiquette pour = "MobilePhone"> Company: </bable>
<input type = "text" id = "Company" name = "Company" />
<br/>
<input type = "bouton" onclick = "Save ()" value = "Ajouter un enregistrement" />
</div>
<br/>
<div id = "list">
</div>
</docy>
</html>
L'interface s'affiche comme suit:
Pour implémenter la fonction de création d'un nouveau contact et de le stockage dans la base de données, le code JS simple suivant est requis:
// Ouvrez la base de données
var db = openDatabase ('ContactDB', '', 'Local Database Demo', 204800);
// Enregistrer les données
fonction sauve () {
var user_name = document.getElementById ("user_name"). valeur;
var mobilephone = document.getElementById ("MobilePhone"). Valeur;
var société = document.getElementByid ("Company"). Valeur;
// temps de création
var time = new Date (). getTime ();
db.transaction (fonction (tx) {
tx.ExECUTESQL ('INSERT INTO CONTACT VALEURS (?,
});
}
// La fonction de rappel exécutée après l'instruction SQL est exécutée avec succès
fonction onSuccess (tx, rs) {
alert ("opération réussie");
loadall ();
}
// La fonction de rappel exécutée après l'échec de l'instruction SQL a échoué
fonction onError (tx, error) {
alert ("Opération Échec, message défaillance:" + error.Message);
}
Pour afficher toutes les listes de contacts actuellement enregistrées, vous pouvez utiliser le code JS suivant:
// Récupère tous les contacts stockés dans la base de données SQllite
fonction loadall () {
var list = document.getElementById ("list");
db.transaction (fonction (tx) {
// Si le tableau de données n'existe pas, créez un tableau de données
tx.ExECUTESQL ('Créer une table si elle n'est pas du contact (texte du nom, texte du téléphone, texte de l'entreprise, entier CreateTime)', []);
// Vérifiez tous les enregistrements de contact
tx.ExECUTESQL ('SELECT * FROM CONTACT', [], fonction (TX, RS) {
if (Rs.Rows.length> 0) {
var result = "<s table>";
Result + = "<Tr> <th> Numéro de série </th> <th> Nom </ Th> <Th> Mobile </th> <th> Company </th> <th> Ajouter du temps </th> <th> Opération </th> </tr>";
pour (var i = 0; i <Rs.Rows.length; i ++) {
var row = Rs.Rows.item (i);
// convertir la sortie du temps et du format
var time = new Date ();
time.settime (row.createetime);
var timestr = time.format ("yyyy-mm-dd hh: mm: ss");
// Assemblez un nœud de ligne d'une table
Résultat + = "<tr> <td>" + (i + 1) + "</td> <td>" + row.name + "</td> <td>" + row.phone + "</td> <td>" + row.company + "</pd> <td>" + timestr + "</td> <td> <entrée type = 'Button' Button = 'value =' drelefle ' onClick = 'del ("+ row.phone +")' /> </td> </tr> ";
}
list.innerhtml = résultat;
}autre{
list.innerhtml = "Les données sont actuellement vides, dépêchez-vous et commencent à ajouter des contacts";
}
});
});
}
Parmi eux, la fonction de format impliquant le temps de format peut être appelée la mise en œuvre de JS suivante :Date.prototype.format = fonction (format)
{
var o = {
"M +": this.getMonth () + 1, // mois
"d +": this.getDate (), // jour
"h +": this.gethours (), // heure
"M +": this.getMinutes (), // minute
"S +": this.getSeconds (), // seconde
"Q +": Math.floor ((this.getMonth () + 3) / 3), // Quarter
"S": this.getMilliseconds () // milliseconde
}
if (/ (y +) /. test (format)) format = format.replace (regexp. 1 $,
(this.getlyear () + ""). substr (4 - regexp. 1.S.Length));
pour (var k in o) if (new regexp ("(" + k + ")"). test (format))
format = format.replace (regexp. 1 $,
Regexp. 1 1 $ Length == 1? d'accord] :
("00" + o [k]). Substr (("" + o [k]). Longueur));
format de retour;
}
Enfin, l'effet d'implémentation de l'interface est le suivant:
Pour implémenter un contact spécifique, vous devez exécuter le code JS suivant :// Supprimer les coordonnées
fonction del (téléphone) {
db.transaction (fonction (tx) {
// Notez que le paramètre passé dans le téléphone doit être affiché ici est converti en type de chaîne
tx.ExECUTESQL ('Supprimer du contact où téléphone =?', [String (téléphone)], onSuccess, onError);
});
}
Comme dans le style de table dans la capture d'écran ci-dessus, vous pouvez vous référer au code CSS suivant :ème {
FONT: Bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Couleur: # 4F6B72;
Border-droite: 1px solide # C1DAD7;
Border-Bottom: 1px solide # C1DAD7;
Border-top: 1px solide # C1DAD7;
Espacement des lettres: 2px;
Text-transform: majuscules;
Texte-aligne: gauche;
rembourrage: 6px 6px 6px 12px;
}
td {
Border-droite: 1px solide # C9DAD7;
Border-Bottom: 1px solide # C9DAD7;
Contexte: #FFFF;
rembourrage: 6px 6px 6px 12px;
Couleur: # 4F6B72;
}