Maison > Article > interface Web > Introduction à l'application de stockage de base de données des compétences du didacticiel HTML5 local storage_html5

Introduction à l'application de stockage de base de données des compétences du didacticiel HTML5 local storage_html5

WBOYoriginal: 2016-05-16 15:50:341774parcourir

Dans l'article précédent « Stockage Web du stockage local HTML5 », nous avons brièvement présenté comment utiliser localStorage pour réaliser un stockage local ; en fait, en plus de sessionStorage et localStorage, HTML5 prend également en charge le stockage de données locales via des bases de données locales ; , HTML5 utilise une base de données de type fichier telle que « SQLLite », qui est principalement concentrée sur les appareils embarqués. Les étudiants familiarisés avec le développement IOS/Android doivent être familiarisés avec la base de données SQLLite.
Les opérations de base de données en HTML5 sont relativement simples, comprenant principalement les deux fonctions suivantes :
1. Créer un objet pour accéder à la base de données via la méthode openDatabase

<.>

Copiez le codeLe code est le suivant :

var db = openDatabase(databasename,version,description,size)

Cette méthode a quatre paramètres, leurs fonctions sont :
databasename : nom de la base de données ;
version : numéro de version de la base de données, facultatif
description : description de la base de données
taille : espace ; alloué pour la base de données Taille ;

2. Utilisez l'objet d'accès à la base de données (tel que db) créé lors de la première étape pour exécuter la méthode de transaction afin d'effectuer le traitement des transactions

Copier le codeLe code est le suivant :

db.transaction(function(tx)){
// Exécutez l'instruction pour accéder à la base de données
} ;>

Copier le code
Le code est le suivant :

tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler) La méthode executeSql a quatre paramètres, et leurs fonctions sont les suivantes : sqlQuery : L'instruction SQL qui doit être exécutée spécifiquement, qui peut être create, select, update, delete ;

[value1,value2..] : Un tableau de tous les paramètres utilisés dans l'instruction SQL, remplacez d'abord. les paramètres à utiliser dans l'instruction SQL avec "?", puis placez ces paramètres dans un tableau en séquence. Dans le deuxième paramètre

dataHandler : la fonction de rappel appelée lorsque l'exécution est réussie, à travers laquelle le résultat de la requête ; set peut être obtenu ;

errorHandler : la fonction de rappel appelée lorsque l'exécution échoue ;
Cet article est supporté par la base de données HTML5 , réimplémentez la gestion du carnet d'adresses dans l'article précédent. comme suit :
Les contacts peuvent être créés et enregistrés dans la base de données. Les champs de contact incluent : le nom, le numéro de téléphone portable, l'entreprise, l'heure de création ;

la colonne Exporter toutes les informations de contact actuellement enregistrées
peut supprimer des informations de contact spécifiques ; ;

De même, préparez d'abord une page HTML, comme suit
:

Copier le code
Le code est le suivant :

; Article de base de données locale de stockage HTML5

Name:

Téléphone portable :

<étiquette pour="téléphone portable">Entreprise :< /étiquette> "company" name="company"/>

La fonction nécessite le code JS simple suivant :

Copiez le code

Le code est le suivant :

//Ouvrir la base de données
var db = openDatabase('contactdb','','local database demo',204800);
//Enregistrer les données
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value; ;
//Temps de création
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insérer dans les valeurs de contact(?, ? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
}
//La fonction de rappel exécutée après l'exécution réussie de l'instruction SQL
function onSuccess(tx,rs){
alert("Opération réussie");
loadAll();
}
//La fonction de rappel exécutée après l'échec de l'exécution de l'instruction SQL
function onError(tx ,error){
alert("Opération échouée, message d'échec : " error.message);
}

Pour afficher toutes les listes de contacts actuellement enregistrées, vous pouvez utilisez l'implémentation du code JS suivante :

Copier le code Le code est le suivant :

//Stockez tout dans Récupérez tous les contacts de la base de données sqlLite
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//if Si la table de données n'existe pas, créez la table de données
tx.executeSql('create table if not exist contact(name text,phone text,company text,createtime INTEGER)',[]);
//Interroger tous les contacts Enregistrement de personne
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "result = "Numéro de sérieNomTéléphone portable Société< /th>Ajouter une heureOpération";
pour(var i=0;ivar row = rs.rows.item(i);
//Convertir l'heure et formater la sortie
var time = new Date();
time.setTime(); row.createtime );
var timeStr = time.format("aaaa-MM-jj hh:mm:ss");
//Assembler les nœuds de ligne d'une table
result = "" rangée.nom "" rangée.phone "" rangée .company "" timeStr "< /td>";
}
list.innerHTML = result;
}else{
list.innerHTML = "Les données sont actuellement vides, commencez à ajouter des contacts rapidement";
}
});
});
}

Parmi eux, la fonction de formatage impliquant un temps de formatage peut être implémentée en référence à le JS suivant :

Copier le code Le code est le suivant :

Date.prototype.format = function (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), //quart
"S" : this.getMilliseconds() //milliseconde
}
if(/(y )/ .test(format)) format=format.replace(RegExp.$1,
(this.getFullYear() "").substr(4 - RegExp.$1.length)); 🎜>for(var k in o )if(new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length= =1 ? o[k] :
("00" o[k]).substr(("" o[k]).length));
format de retour
}

Enfin, l'interface L'effet d'implémentation est le suivant :

Pour implémenter un contact spécifique, vous devez exécuter le code JS suivant
:

Copier le codeLe code est le suivant :

//Supprimer les informations de contact

fonction del (phone){
db.transaction(function(tx) {
//Notez que ce qui doit être affiché ici est de convertir le paramètre entrant phone en un type de chaîne
tx.executeSql('delete from contactwhere phone=?',[String(phone)],onSuccess,onError)
});
}

Pour le style de tableau dans la capture d'écran ci-dessus, veuillez vous référer au code CSS suivant
:

Copier le code代码如下 :

th {
police : gras 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans empattement ;
couleur : #4f6b72 ;
bordure droite : 1px solide #C1DAD7 ;
bordure inférieure : 1px solide #C1DAD7 ;
bordure supérieure : 1px solide #C1DAD7 ;
espacement des lettres : 2 px ;
text-transform : majuscule ;
alignement du texte : gauche ;
rembourrage : 6px 6px 6px 12px ;
}
td {
border-right : 1px solid #C9DAD7 ;
bordure inférieure : 1px solide #C9DAD7 ;
fond : #fff ;
rembourrage : 6px 6px 6px 12px ;
couleur : #4f6b72 ;
}

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Brisez les limites de la syntaxe du canevas et laissez-la prendre en charge les compétences du didacticiel syntax_html5 en chaîneArticle suivant：Brisez les limites de la syntaxe du canevas et laissez-la prendre en charge les compétences du didacticiel syntax_html5 en chaîne

Articles Liés

Voir plus