HTML5 - Banco de dados SQL da web

A API de banco de dados Web SQL não faz parte da especificação HTML5, mas é uma especificação separada que apresenta um conjunto de APIs para manipular bancos de dados do lado do cliente usando SQL.

Presumo que você seja um ótimo desenvolvedor da web e, se for esse o caso, sem dúvida, você conhece bem os conceitos de SQL e RDBMS. Se você ainda deseja ter uma sessão com SQL, pode seguir nosso Tutorial de SQL .

O banco de dados Web SQL funcionará na versão mais recente do Safari, Chrome e Opera.

Os Métodos Básicos

Seguem os três métodos principais definidos na especificação que irei abordar neste tutorial -

openDatabase - Este método cria o objeto de banco de dados usando o banco de dados existente ou criando um novo.
transaction - Este método nos dá a capacidade de controlar uma transação e executar o commit ou rollback com base na situação.
executeSql - Este método é usado para executar uma consulta SQL real.

Abrindo banco de dados

O método openDatabase se encarrega de abrir um banco de dados se ele já existe, este método irá criá-lo se já não existir.

Para criar e abrir um banco de dados, use o seguinte código -

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

O método acima tomou os seguintes cinco parâmetros -

Nome do banco de dados
Número da versão
Descrição do texto
Tamanho do banco de dados
Callback de criação

O último e quinto argumento, callback de criação, será chamado se o banco de dados estiver sendo criado. Sem esse recurso, no entanto, os bancos de dados ainda estão sendo criados dinamicamente e com as versões corretas.

Executando consultas

Para executar uma consulta, você usa a função database.transaction (). Esta função precisa de um único argumento, que é uma função que realmente executa a consulta da seguinte maneira -

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

A consulta acima criará uma tabela chamada LOGS no banco de dados 'mydb'.

Operação INSERT

Para criar entradas na tabela, adicionamos uma consulta SQL simples no exemplo acima da seguinte forma -

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

Podemos passar valores dinâmicos ao criar a entrada da seguinte forma -

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

Aqui e_id e e_log são variáveis externas e executeSql mapeia cada item no argumento da matriz para os "?" s.

Operação READ

Para ler os registros já existentes, usamos um retorno de chamada para capturar os resultados da seguinte forma -

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

Exemplo Final

Então, finalmente, vamos manter este exemplo em um documento HTML5 completo como a seguir e tentar executá-lo com o navegador 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>

Isso produzirá o seguinte resultado -