1. Home
  2. Banco de dados HTML5 Web SQL

O melhor tutorial Banco de dados HTML5 Web SQL em 2024. Neste tutorial você pode aprender métodos de núcleo,Open Database,Para executar operações de consulta,inserir dados,ler dados,exemplo completo,excluir registro,Atualizar registros,exemplo completo,

Banco de dados HTML5 Web SQL

Web banco de dados SQL API não faz parte da especificação HTML5, mas é uma especificação separada, introduziu um conjunto de APIs para usar banco de dados cliente operação SQL.

Se você é uma extremidade traseira programador Web, ele deve ser fácil de entender operações SQL.

Você também pode consultar o nosso tutorial SQL para aprender mais operações de banco de dados de conhecimento.

Banco de Dados SQL Web pode trabalhar na versão mais recente do Safari, Chrome e Opera browser.

métodos de núcleo

A seguir estão os três métodos principais definidas na especificação:

  1. OpenDataBase: Este método utiliza um banco de dados existente ou criar um novo banco de dados de objeto de banco de dados.
  2. transação: Este método permite-nos controlar uma transação, e com base neste caso confirmação ou anulação.
  3. ExecuteSql: Este método é usado para realizar a consulta SQL real.

Open Database

Podemos usar o método OpenDatabase () para abrir um banco de dados existente, se o banco de dados não existir, criar um novo banco de dados, use o seguinte código: 

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

OpenDatabase () método dos cinco parâmetros que correspondem à descrição:

  1. Nome do banco de dados
  2. O número de versão
  3. Descrição de texto
  4. Tamanho do banco de dados
  5. Criar uma chamada de retorno

O quinto parâmetro, criar um callback será chamado depois de criar o banco de dados.

Para executar operações de consulta

Execução usa a função 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)');
});

A declaração acima cria uma tabela chamado logs no banco de dados "mydb" após a execução.

inserir dados

Depois de executar a declaração acima para criar a tabela, podemos inserir alguns dados: 

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

Podemos também usar um valor dinâmico para inserir os dados: 

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

Instância e_id e_log e variáveis ​​externas, parâmetro de matriz ExecuteSQL é mapeado para cada entrada na "?".

ler dados

O exemplo a seguir demonstra como ler os dados que já estão no banco de dados: 

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

exemplo 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.w3write.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>

tente »

Exemplos dos resultados operacionais acima como mostrado abaixo:

excluir registro

Formato excluir registros são as seguintes: 

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

Remova a ID de dados especificado pode também ser dinâmico: 

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

Atualizar registros

atualizar registros usando o seguinte formato: 

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

Atualiza o id de dados especificado pode também ser dinâmico: 

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

exemplo 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.w3write.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>

tente »

Exemplos dos resultados operacionais acima como mostrado abaixo:

Tutoriais quentes

Contact US

Banco de dados HTML5 Web SQL
10/30