HTML 5 Web SQL Database Core Trident

Autor：Eve Cole Data da Última Atualização：2025-03-29 22:32:02

A API do banco de dados da Web SQL não está realmente incluída na especificação HTML 5. É uma especificação independente que introduz um conjunto de APIs que usam o SQL para operar bancos de dados do cliente. Supondo que você seja um excelente desenvolvedor da Web, não há dúvida de que você já está familiarizado com os conceitos relacionados aos SQL e aos bancos de dados. Se você não estiver familiarizado com o SQL, continue lendo. Antes deste artigo, é melhor aprender tutoriais relacionados ao SQL primeiro.

As versões mais recentes do Chrome, Safari e Opera suportam bancos de dados da Web SQL.

Métodos principais

Este artigo introduzirá três métodos principais definidos na especificação:

1. OpendAtabase: Este método usa um banco de dados existente ou cria um novo banco de dados para criar um objeto de banco de dados.

2. Transação: Este método nos permite controlar a confirmação ou reversão da transação de acordo com a situação.

3. Executesql: Este método é usado para executar consultas SQL reais.

Abra o banco de dados

O método de opendatabase abre um banco de dados existente. Se o banco de dados não existir, ele também pode criar um banco de dados. A sintaxe para criar e abrir o banco de dados é a seguinte:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);

O método OpendAtabase acima usa os cinco parâmetros a seguir:

1. Nome do banco de dados (MyDB)

2. Número da versão (1.0)

3. Descrição (DB de teste)

4. Tamanho do banco de dados (2*1024*1024)

5. Crie um retorno de chamada

O último, ou seja, o quinto parâmetro, cria um retorno de chamada, que será chamado ao criar o banco de dados, mas mesmo sem esse parâmetro, o banco de dados pode ser criado no tempo de execução.

Execute uma consulta

Execute a consulta usando a função Database.Transaction (), que requer apenas um parâmetro, e a seguir é uma declaração de consulta real:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (função (tx) {
 tx.executesql ('createTableIfNotexistsLogs (idunique, log)');
 });

A consulta acima criará uma tabela de logs no banco de dados MYDB.

Inserir operação

Para inserir um novo registro na tabela, adicionamos uma consulta SQL simples à declaração de consulta acima, e a declaração modificada é a seguinte:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (função (tx) {
 tx.executesql ('createTableIfNotexistsLogs (idunique, log)');
 tx.executesql ('insertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('insertIntologs (id, log) valores (2, logmsg)');
 });

Ao inserir um novo registro, também podemos passar valores dinâmicos, como:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (função (tx) {
 tx.executesql ('createTableIfNotexistsLogs (idunique, log)');
 tx.executesql ('insertIntologs
 (id, log) valores (?,? '), [e_id, e_log];
 });

Aqui E_ID e E_LOG são variáveis externas, executa os mapas de cada item para? nos parâmetros da matriz.

Operação de leitura

Se você quiser ler o registro que já existe, usamos um retorno de chamada para capturar o resultado, o código é o seguinte:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (função (tx) {
 tx.executesql ('createTableIfNotexistsLogs (idunique, log)');
 tx.executesql ('insertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('insertIntologs (id, log) valores (2, logmsg)');
 });
 db.transaction (função (tx) {
 tx.executesql ('select*Fromlogs', [], function (tx, resultados) {
 Varlen = Results.Rows.Length, i;
 msg = <p> Foundrows:+len+</p>;
 Document.QuerySelector ('#status'). Innerhtml+= msg;
 para (i = 0; i <len; i ++) {
 alerta (resultados.Rows.item (i) .Log);
 }
 },nulo);
 });

Exemplo completo

Finalmente, apresentamos o que foi descrito anteriormente em um documento completo HTML 5, enquanto usamos um navegador para analisar o documento HTML 5.

 <! Doctypehtml>
 <html>
 <head>
 <scripttype = text/javascript>
 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 Varmsg;
 db.transaction (função (tx) {
 tx.executesql ('createTableIfNotexistsLogs (idunique, log)');
 tx.executesql ('insertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('insertIntologs (id, log) valores (2, logmsg)');
 msg = '<p> logMessageCreatedAndRowInserted. </p>';
 Document.QuerySelector ('#status'). Innerhtml = msg;
 });
 db.transaction (função (tx) {
 tx.executesql ('select*Fromlogs', [], function (tx, resultados) {
 Varlen = Results.Rows.Length, i;
 msg = <p> Foundrows:+len+</p>;
 Document.QuerySelector ('#status'). Innerhtml+= msg;
 para (i = 0; i <len; i ++) {
 msg = <p> <b>+resultados.rows.item (i) .log+</b> </p>;
 Document.QuerySelector ('#status'). Innerhtml+= msg;
 }
 },nulo);
 });
 </script>
 </head>
 <Body>
 <divid = statusName = status> statusMessage </div>
 </body>
 </html>

Abaixo está o resultado da saída produzido na versão mais recente do navegador Safari ou Opera.

 LogMessageCreatedAndRowInsert.
 Foundrows: 2
 Foobar
 logmsg