Latest web development tutorials

Base de données HTML5 Web SQL

Web SQL Database API ne fait pas partie de la spécification HTML5, mais il est une spécification distincte, a présenté un ensemble d'API à utiliser la base de données client opération SQL.

Si vous êtes une extrémité arrière de programmeur Web, il devrait être facile de comprendre les opérations SQL.

Vous pouvez également consulter notre tutoriel SQL pour apprendre plusieurs opérations de base de données de connaissances.

Web base de données SQL peut fonctionner dans la dernière version de Safari, Chrome et Opera navigateur.


méthodes de base

Voici les trois principales méthodes définies dans le cahier des charges:

  1. OpenDatabase: Cette méthode utilise une base de données existante ou créer une nouvelle base de données objet de base de données.
  2. transaction: Cette méthode nous permet de contrôler une transaction, et basé sur ce cas commit ou rollback.
  3. ExecuteSQL: Cette méthode est utilisée pour exécuter la requête SQL réelle.

Open Database

Nous pouvons utiliser la méthode OpenDatabase () pour ouvrir une base de données existante, si n'existe pas la base de données, créer une nouvelle base de données, utilisez le code suivant:

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

OpenDatabase () de cinq paramètres correspondant à la description:

  1. Nom de la base
  2. Le numéro de version
  3. Description texte
  4. Base de données Taille
  5. Créer un rappel

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


Pour effectuer des opérations de requête

Exécution utilise 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)');
});

La déclaration ci-dessus crée une table JOURNAUX nommées dans la base de données 'mydb' après l'exécution.


Insérer des données

Après l'exécution de la déclaration ci-dessus pour créer la table, 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, "本教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});

Nous pouvons également utiliser une valeur dynamique pour insérer les 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];
});

Instance e_id e_log et variables externes, paramètre de tableau ExecuteSQL est mappé à chaque entrée dans le "?".


Lire les données

L'exemple suivant montre comment lire les données déjà présentes 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, "本教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});

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

<!DOCTYPE HTML>
<html>

   <head>
	
      <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, "本教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
            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>

Essayez »

Des exemples des résultats d'exploitation ci-dessus, comme indiqué ci-dessous:


Supprimer l'enregistrement

Format supprimer les enregistrements sont les suivants:

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

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

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

Mettez à jour les dossiers

Mettre à jour les enregistrements en utilisant le format suivant:

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

Met à jour l'ID 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

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">  
      <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, "本教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
            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=\'www.w3cschool.cc\' 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>

Essayez »

Des exemples des résultats d'exploitation ci-dessus, comme indiqué ci-dessous: