Explication détaillée de l'instance de base de données locale HTML5

Les bases de données Web SQL HTML5 (base de données locale html5) sont en effet très tentantes. Lorsque vous constaterez que vous pouvez utiliser la même instruction de requête que la requête mysql pour faire fonctionner la base de données locale, vous trouverez cette chose assez intéressante. Aujourd'hui, découvrons l'API Web SQL Database de HTML 5 : openDatabase, transaction, executeSql. L'API Web SQL Database ne fait pas réellement partie de la spécification HTML5, mais une spécification distincte. Il manipule la base de données du client via un ensemble d'API. Les navigateurs grand public tels que Safari, Chrome, Firefox et Opera prennent déjà en charge la base de données Web SQL. Les bases de données Web SQL de HTML5 sont en effet très tentantes. Lorsque vous constaterez que vous pouvez utiliser la même instruction de requête qu'une requête MySQL pour faire fonctionner une base de données locale, vous trouverez cette chose très intéressante. Aujourd’hui, découvrons l’API Web SQL Database de HTML 5.
Ce qui suit présentera un par un comment créer et ouvrir une base de données, créer une table, ajouter des données, mettre à jour données, supprimer données et supprimer une table.
Introduisez d'abord trois méthodes de base
1. openDatabase : Cette méthode utilise une base de données existante ou crée une nouvelle base de donnéesCrée une base de donnéesobjet.
2. Transaction : Cette méthode nous permet de contrôler la soumission ou l'annulation de la transaction en fonction de la situation.
3.executeSql : Cette méthode est utilisée pour exécuter de vraies requêtes SQL.
Première étape : ouvrir la connexion et créer la base de données

Le code est le suivant :

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if
 (!dataBase) {
    alert("数据库创建失败！");
} 
else
 {
    alert("数据库创建成功！");
}

Expliquez la méthode openDatabase pour ouvrir une base de données existante. Il peut également créer la base de données si elle n'existe pas. Les significations de plusieurs paramètres sont :
1, nom de la base de données.
2. Le numéro de version est actuellement 1.0. Laissez-le tranquille et écrivez-le à mort.
3. Description de la base de données.
4. Définissez la taille des données.
5, Fonction de rappel (peut être omise).
Créez la base de données lors du premier appel, puis établissez la connexion.
La base de données créée existe localement, et le chemin est le suivant :
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987.
Ce qui est créé est une base de données sqllite. Vous pouvez utiliser SQLiteSpy pour ouvrir le fichier et voir les données qu'il contient. SQLiteSpy est un logiciel vert Vous pouvez le télécharger depuis Baidu ou l'adresse de téléchargement officielle de SQLiteSpy : SQLiteSpy.
Étape 2 : Créer une table de données

Le code est le suivant :

this.createTable=function() {  
dataBase.transaction( function(tx) {     
tx.executeSql(        
"create table if not exists stu (id REAL UNIQUE, name TEXT)",         
[],         
function(tx,result){ alert('创建stu表成功'); 
},         
function(tx, error){ alert('创建stu表失败:' + error.message);     
}); 
});
}

Expliquez que la fonction
executeSql a quatre paramètres, leur les significations sont respectivement Oui :
1) La chaîne représentant la requête, le langage SQL utilisé est SQLite 3.6.19.
2) Les données de chaîne insérées dans la requête là où se trouve le point d'interrogation.
3) Fonction de rappel exécutée en cas de succès. Renvoie deux paramètres : tx et le résultat de l'exécution.
4) Une fonction de rappel exécutée en cas d'échec. Renvoie deux paramètres : tx et échec message d'erreur .
Étape 3 : Effectuer CRUD
1) Ajouter des données :

Le code est le suivant :

this.insert = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "insert  into  stu (id, name) values(?, ?)",
        [id, '徐明祥'],
        function () { alert('添加数据成功'); },
        function (tx, error) { alert('添加数据失败: ' + error.message); 
        } );
    });

2) Interroger les données

Le code est le suivant :

this.query = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "select  *  from  stu", [],
         function (tx, result) {  //执行成功的回调函数
             //在这里对result 做你想要做的事情吧...........
            },
         function (tx, error) {
            alert('查询失败: ' + error.message);
         } );
      });
}

Expliquez-le
La fonction de rappel qui s'exécute avec succès dans le code ci-dessus a un résultat en paramètre.

résultat : le ensemble de données interrogé. Son type de données est SQLResultSet, tout comme le DataTable en C#.
SQLResultSet est défini comme :

Le code est le suivant :

interface  SQLResultSet {
             readonly  attribute  long  insertId;
             readonly  attribute  long  rowsAffected;
             readonly  attribute  SQLResultSetRow
List
  rows;
             };

Le attribut le plus important : les lignes de type SQLResultSetRowList sont les "lignes" de l’ensemble de données.
rows a deux attributs : length et item.
Alors, récupérez la valeur d'une certaine ligne et colonne du résultat de la requête : result.rows[i].item[fieldname].

3) Mettre à jour les données

Le code est le suivant :

this.update = function (id, name) {   
dataBase.transaction(function (tx) {            
tx.executeSql(        
"update  stu  set  name =  ?  where  id= ?",        
[name, id],         
function (tx, result) {         },        
function (tx, error) {            
alert('更新失败: ' + error.message);        
});   
});
}

4) Supprimer les données

Le code est le suivant :

this.del = function (id) {
     dataBase.transaction(function (tx) {
            tx.executeSql(
        "
delete
  from  stu  where  id= ?",
        [id],
         function (tx, result) {
         },
        function (tx, error) {
            alert('删除失败: ' + error.message);
        });
    });
}

5) Supprimer la table de données

Le code est le suivant :

this.dropTable = function () {    
dataBase.transaction(function (tx) {            
tx.executeSql('drop  table  stu');     
});
}

[Recommandations associées]

1. Tutoriel vidéo gratuit HTML5

2 Démonstration du code H5 pour créer une minuterie

3. Exemple détaillé de H5. effectuer plusieurs téléchargements d'images

4. Explication détaillée des données d'attributs personnalisés de H5-*

5 Vous apprendre à mettre en œuvre un micro-H5. scène

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!