HTML5 - Database SQL Web

L'API del database SQL Web non fa effettivamente parte della specifica HTML5, ma è una specifica separata che introduce una serie di API per manipolare i database lato client utilizzando SQL.

Presumo che tu sia un ottimo sviluppatore web e, in tal caso, senza dubbio saresti ben consapevole dei concetti SQL e RDBMS. Se vuoi ancora avere una sessione con SQL, puoi seguire il nostro tutorial SQL .

Il database SQL Web funzionerà nell'ultima versione di Safari, Chrome e Opera.

I metodi fondamentali

Ci sono i seguenti tre metodi principali definiti nelle specifiche che tratterò in questo tutorial:

openDatabase - Questo metodo crea l'oggetto database utilizzando il database esistente o creandone uno nuovo.
transaction - Questo metodo ci dà la possibilità di controllare una transazione e di eseguire commit o rollback in base alla situazione.
executeSql - Questo metodo viene utilizzato per eseguire la query SQL effettiva.

Database di apertura

Il metodo openDatabase si occupa di aprire un database se già esiste, questo metodo lo creerà se già non esiste.

Per creare e aprire un database, utilizzare il codice seguente:

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

Il metodo sopra ha preso i seguenti cinque parametri:

Nome del database
Numero della versione
Descrizione del testo
Dimensioni del database
Richiamata creazione

L'ultimo e il quinto argomento, il callback di creazione verrà chiamato se il database viene creato. Senza questa funzionalità, tuttavia, i database vengono ancora creati al volo e con versione corretta.

Esecuzione di query

Per eseguire una query si utilizza la funzione database.transaction (). Questa funzione necessita di un singolo argomento, che è una funzione che si occupa di eseguire effettivamente la query come segue:

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 query precedente creerà una tabella chiamata LOGS nel database "mydb".

Operazione INSERT

Per creare entrate nella tabella aggiungiamo una semplice query SQL nell'esempio sopra come segue:

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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

Possiamo passare valori dinamici durante la creazione dell'inserimento come segue:

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

Qui e_id e e_log sono variabili esterne ed executeSql associa ogni elemento nell'argomento dell'array agli "?".

Operazione READ

Per leggere i record già esistenti utilizziamo un callback per acquisire i risultati come segue:

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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

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

Esempio finale

Quindi, infine, manteniamo questo esempio in un documento HTML5 completo come segue e proviamo a eseguirlo con il browser Safari.

<!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, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div> 
   </body> 
</html>

Questo produrrà il seguente risultato: