Usando a API “Web SQL Database” do HTML 5
Como vimos no artigo anterior, uma das novidades do HTML 5 é o Web SQL Database, que permite utilizar SQL para armazenar dados no lado do cliente através do SQLite. Vamos ver o seu funcionamento passo-a-passo a seguir:
Abrindo uma Conexão
var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);
O código acima cria um objeto de banco de dados “db” com 4 argumentos:
1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.
Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.
Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:
if (! db) alert ("Falha ao conectar no banco de dados.");
É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.
Criando uma Tabela
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});
(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)
Executando Consultas
O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.
Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.
Transação é uma simples função que contém os códigos SQL:
db.transaction(function (tx) {
// Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});
Para ficar mais claro, vamos a alguns exemplos:
Inserindo um Registro
db.transaction(function(tx) {
tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
// caso ocorra algum erro
alert(e.message);
});
});
Lendo os Registros
// busca os contatos do banco
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
for (i = 0; i < resultado.rows.length; i++)
alert(resultado.rows.item(i)['nome']);
});
});
Exemplo Funcional
Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.
Simples Exemplo de uso do HTML Web SQL Storage.
Gostou? Deixe um comentário!
