Latest web development tutorials

Database HTML5 Web SQL

API Web SQL Database non fa parte della specifica HTML5, ma è una specifica separata, ha introdotto una serie di API per utilizzare database client operazione SQL.

Se sei un retrotreno programmatore web, dovrebbe essere facile da capire operazioni SQL.

È inoltre possibile fare riferimento al nostro tutorial di SQL per conoscere altre operazioni di database di conoscenza.

Database SQL Web può funzionare nella sua ultima versione di Safari, Chrome e il browser Opera.

metodi core

Di seguito sono i tre metodi di base definite nella specifica:

  1. OpenDatabase: Questo metodo utilizza un database esistente o creare un nuovo database oggetto di database.
  2. operazione: Questo metodo ci permette di controllare una transazione, e sulla base di questo caso commit o rollback.
  3. ExecuteSQL: Questo metodo viene utilizzato per eseguire la query effettiva SQL.

Open Database

Siamo in grado di utilizzare il metodo OpenDatabase () per aprire un database esistente, se il database non esiste, creare un nuovo database, utilizzare il seguente codice: 

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

OpenDatabase () il metodo dei cinque parametri corrispondenti alla descrizione:

  1. Nome database
  2. Il numero di versione
  3. Descrizione Testo
  4. Dimensioni del database
  5. Creare un callback

Il quinto parametro, creare un callback verrà chiamata dopo la creazione del database.

Per eseguire operazioni di query

Esecuzione utilizza la funzione 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 dichiarazione di cui sopra crea una tabella denominata registri nella banca dati 'mydb' dopo l 'esecuzione.

inserire i dati

Dopo aver eseguito il dichiarazione di cui sopra per creare la tabella, possiamo inserire alcuni dati: 

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")');
});

Possiamo anche utilizzare un valore dinamico per inserire i dati: 

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];
});

Istanza e_id e_log e variabili esterne, parametro di matrice ExecuteSQL viene mappato ogni voce "?".

leggere i dati

L'esempio seguente mostra come leggere i dati già presenti nel database: 

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);
});

esempio completo 

<!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>

Prova »

Esempi dei risultati operativi sopra riportati di seguito:

Elimina record

Format eliminare i record sono i seguenti: 

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

Rimuovere l'ID di dati specificata può anche essere dinamico: 

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

aggiornare i record

aggiornare i record utilizzando il seguente formato: 

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

Aggiorna l'id di dati specificata può anche essere dinamico: 

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

esempio completo 

<!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>

Prova »

Esempi dei risultati operativi sopra riportati di seguito: