Já pensou em utilizar SQL do lado do Cliente? Bom, agora isso é possível, com o HTML 5 podemos utilizar o Web SQL Database.
Ele traz uma API de banco de dados SQL Web, por enquanto ainda é uma especificação separada do HTML 5, mas já introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.
Estamos supondo que você já conheça e trabalhe com o SQL, mas caso não saiba o que é, recomendamos um mini curso de MySQL.
Por enquanto, Web SQL Database está suportado nas últimas versões do Chorme, Safari e Opera.
Esta postagem é baseada no artigo em inglês: Web SQL Database
Os métodos principais:
Há três seguintes métodos fundamentais definidos na especificação de que vamos mostrar nesta postagem:
- openDataBase: Este método cria o objeto de banco de dados, depois utiliza um banco de dados existente ou criar um novo.
- transaction: Este método controlar a transação e nos retorna uma confirmação ou anulação com base no que foi executado.
- executeSql: Este método é usado para executar um consulta SQL.
Abrindo Base de dados:
O openDataBase método cuida da abertura de um banco de dados se ele já existe, este método irá criá-lo se ele não existe.
Para criar e abrir um banco de dados, use o seguinte código:
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);
Acima método tem quatro parâmetros:
- Nome do banco
- Número da versão
- Descrição de texto
- Tamanho da base de dados
Execução de consultas:
Para executar uma consulta, deve ser utilizado a função database.transaction (). Esta função precisa de um único argumento, mas pode ser passado o 2º e 3º parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);// Simplesdb.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");});// Debugandodb.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)", function(tx){ /*Sucesso*/ }, function(erro){ /*Error*/ });});
As consultas acima irão criar uma tabela chamada LOGS na base de dados “Teste’.
Inserir dados:
Para inserir dados na tabela, utilizamos a função transaction() também, só que, desta vez com o INSERT para popular a tabela, veja o exemplo:
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)"); // Os 3 null represetam // 1º - Um array contendo dados // 2º - Função para sucesso // 3º - Função para Erro // Vamos explicá-los mais abaixo tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') ", null, null, null); tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') ", null, null, null);});
Também podemos passar valores dinâmicos, utilizamos a seguinte sintaxe:
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { var novo_log = 'Resultado do Log de Teste 01'; // Os 3 null estão sendo mostrados aqui // 1º - Um array contendo dados, estamos passando apenas um valor com o novo_log // 2º - Função para sucesso // 3º - Função para Erro // Vamos explicá-los mais abaixo tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)"); tx.executeSql ("INSERT INTO REGISTROS (log) VALUES (?)",[novo_log],null,null); });
Aqui novo_log é uma variável e executeSql mapeia cada item no argumento de matriz para o “?”, isto é, poderíamos ter vários “?” e no final teríamos [var_1,var_2,var_3], sendo que, ele utilizará a ordem exata das variáveis para popular a query.
Lendo os dados:
Para ler os registros já existentes usamos um callback para capturar os resultados da seguinte forma:
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);});db.transaction (function (tx) { tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p> Registros encontrados:" + len + "</ p>"; for (i = 0; i <len; i ++) { console.log(results.rows.item(i) .log); } }, null);});
Exemplo final:
Então, finalmente, vamos criar um exemplo em HTML 5, este exemplo está funcional e testado no Chrome versão Versão 39.0.2171.71 m.
var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);db.transaction (function (tx) { tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null); tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null); console.log('Log mensagem criada e linha inserida');});db.transaction(function(tx){ tx.executeSql( "SELECT * FROM LOGS", [], function(tx, result){ console.log('Deu certo!'); var len = result.rows.length, i; for(i=0;i<len;i++){ console.log( result.rows.item(i) ); } }, function(tx, error){ console.log('Deu errado!'); console.log(error); } );});
Isso produziria o seguinte resultado:
Log mensagem criada e linha inseridaDeu certo!Object {id: 1, log: "Resultado do Log de Teste 01"}Object {id: 2, log: "Resultado do Log de Teste 02"}
Conclusão:
É bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persistência é como uma sessão, ao fechar o browser perde-se o objeto, mas ao trocar de página dentro do mesmo domínio o mesmo permanece.
Já pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload para rastrear todo o caminho que um usuário caminhou dentro do seu site? A utilização ficará por conta da imaginação de vocês.
Um exemplo que encontramos no GitHub e que vale a pena ver:
Link original do código aqui.
https://gist.github.com/andyj/1599544
Link de uma aplicação feita com Web Sql.
HTML5 webSQL app synching with a php MySQL server
Se gostaram, compartilhem e façam comentários, sugestões, correções e correções sempre são bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!
Quer servidores Seguros, Estáveis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite é sua resposta.
Hospedagem de Sites, Data Center e Registro de Domínio Grátis só aqui!