HTML5WebSQL


L'API Web SQL Database ne fait pas partie de la spécification HTML5, mais il s'agit d'une spécification indépendante qui introduit un ensemble d'API pour exploiter les bases de données client à l'aide de SQL.

Si vous êtes un programmeur web backend, il devrait être facile de comprendre les opérations SQL.

Vous pouvez également vous référer à notre tutoriel SQL pour en savoir plus sur les opérations de base de données.

La base de données Web SQL fonctionne dans les dernières versions des navigateurs Safari, Chrome et Opera.

Méthodes principales

Voici les trois méthodes principales définies dans la spécification :

  1. openDatabase : Cette méthode Créer un objet de base de données à l'aide d'une base de données existante ou d'une nouvelle base de données.

  2. transaction : Cette méthode nous permet de contrôler une transaction et d'effectuer une validation ou une annulation en fonction de cette situation.

  3. executeSql : Cette méthode est utilisée pour exécuter la requête SQL réelle.

Ouvrir la base de données

Nous pouvons utiliser la méthode openDatabase() pour ouvrir une base de données existante. Si la base de données n'existe pas, une nouvelle base de données sera créée. . Le code d'utilisation est le suivant : 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

La description des cinq paramètres correspondant à la méthode openDatabase() :

  1. Nom de la base de données

    2. <. 🎜>
  2. Numéro de version

  3. Texte de description

  4. Taille de la base de données

  5. Créer un rappel

Créer un rappel

Le cinquième paramètre, le rappel de création sera appelé après la création de la base de données.

Exécuter l'opération de requête

Exécuter l'opération à l'aide de la fonction database.transaction() : 
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

Une fois l'instruction ci-dessus exécutée, un nom sera créé dans la base de données 'mydb' se trouve la table des LOGS.

Insérer des données

Après avoir exécuté l'instruction de création de table ci-dessus, nous pouvons insérer des données : 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

Nous pouvons également utiliser des valeurs dynamiques pour insérer des données : 
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS 
                        (id,log) VALUES (?, ?'), [e_id, e_log];
});

Les e_id et e_log de l'instance sont des variables externes, et executeSql mappera chaque entrée du paramètre du tableau à "?".

Lecture des données

L'exemple suivant montre comment lire des données qui existent déjà dans la base de données : 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
	
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
	
   }, null);
});

Exemple complet

Instance
<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>php中文网(php.cn)</title> 
      <script type="text/javascript">
		
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
         var msg;
			
         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>查询记录条数: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
					
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });
			
      </script>
		
   </head>
	
   <body>
      <div id="status" name="status">状态信息</div>
   </body>
	
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Supprimer les enregistrements

Le format utilisé pour supprimer les enregistrements est le suivant : 
db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

La suppression de l'identifiant de données spécifié peut également être dynamique : 

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

Mettre à jour l'enregistrement

Le format utilisé pour mettre à jour l'enregistrement est le suivant : 
db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

La mise à jour de l'identifiant de données spécifié peut également être dynamique : 

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

Exemple complet

Instance
<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">  
	   <title>php中文网(php.cn)</title> 
      <script type="text/javascript">
      
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
         var msg;
         
         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
              tx.executeSql('DELETE FROM LOGS  WHERE id=1');
              msg = '<p>删除 id 为 1 的记录。</p>';
              document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
             tx.executeSql('UPDATE LOGS SET log=\'php.cn\' WHERE id=2');
              msg = '<p>更新 id 为 2 的记录。</p>';
              document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>查询记录条数: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
               
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });
         
      </script>
      
   </head>
   
   <body>
      <div id="status" name="status">状态信息</div>
   </body>
   
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher le instance en ligne


<🎜 ><🎜><🎜>