0 Compartilhamentos 847 Views 1 Comments

Trabalhando com o Web SQL Database do HTML5

24 de junho de 2010

O joguinho do Pacman do Google mostrou ao mundo que o HTML5 já é uma realidade mas uma das funcionalidades mais legais ainda não foi muito divulgada, é o “Web SQL Database“.

O que é?

O Web SQL Database permite criar e acessar bancos de dados no lado do cliente (client-side) usando uma linguagem SQL.

Ou seja…

É uma alternativa a Cookies para armazenamento de dados no navegador e, mais legal ainda, dá uma independência maior as aplicações javascript, que em tese não dependerão mais de linguagens no lado do servidor (PHP, .NET, etc) para armazenar algo em um banco de dados.

O que não é

Isto tudo é muito legal, mas… é importante frisar algumas coisas:

  • Esta tecnologia não conecta a bancos de dados em servidores externos
  • O método é um pouco “caro” em termos de performance e somente deve ser usado se não houver outras alternativas
  • O navegador do usuário precisa suportar HTML5
  • Como a especificação e respectivas implementações do HTML5 ainda não estão 100% prontas, estes exemplos são mais provas de conceito do que qualquer outra coisa, a API poderá mudar na versão final

Tendo dito isto, vamos dar uma olhada mais a fundo e ver como funciona! Se ainda não tiver o Google Chrome instalado, baixe ele agora pois é o browser que melhor suporta o Web SQL Database.

Como parto do pressuposto que estamos usando o Chrome, vou usar console.log() para as demonstrações, então abra o console do chrome (clique com o botão direito, em inspecionar elemento e na aba “Console”). Todo o código vai dentro de um tag ‘script’ normal.

Como instanciar o objeto database

O conceito de versões é um pouco enganoso, pois não é possível existirem múltiplas versões do mesmo banco ao mesmo tempo; ele é apenas para facilitar migrações entre versões de bancos.

Executando uma consulta

Para fazer consultas, utilizamos o método transaction do objeto database e, dentro dele, o método executeSql do objeto SQLTransaction:

Se rodar o código acima, verá que a consulta dará um erro e retornará um objeto SQLError, para acessar a mensagem de erro é só acessar as propriedades “code” e “message” do objeto.

Dê uma olhada na mensagem de erro… pois é não criamos a tabela!

Como criar e popular uma tabela

O SQL não é nenhuma novidade, só é necessário envolvê-lo nos métodos corretos:
(alias, ele utiliza statements preparados, para proteção contra SQL Injection, mas isto está fora do escopo deste artigo!)

Pronto! Fácil né? Agora tente rodar a primeira consulta denovo… não deu erro né? Se deu tudo certo, o objeto retornado será do tipo SQLResultSet. Se inspecionar o objeto verá que ele tem algumas propriedades úteis: insertId (no caso de inserts), rowsAffected, rows (no caso de selects).

Utilizando os resultados

Para finalizar o artigo, vou mostrar como interagir com os resultados. Para isto, vamos mudar um pouco a consulta inicial:

Repare que podemos tratar o objeto SQLResultSet como um array e não só ver a propriedade length() mas também fazer um loop e acessar o seu conteúdo!

Legal né?

Espero que tenham curtido o artigo e que se animem com as possibilidades que o HTML5 está trazendo!

[[]]s

Carregando...

Você pode se interessar

O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
24 visualizações
Artigos
24 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021

Federated Learning of Cohorts é uma API proposta pelo Google para substituir os cookies, mas ela também oferece problemas

Como planejar e construir um projeto de programação
Artigos
248 visualizações
Artigos
248 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
362 visualizações
Artigos
362 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

One Response

  1. Uma pergunta: é possível guardar informações confidenciais neste tipo de banco de dados levando-se em conta que ele está no lado do cliente? Estou criando um App híbrido, e vou precisar armazenar algumas informações, como ID e Token do usuário, mas tenho medo dos dados ficarem expostos nos diretórios do device e serem roubados por terceiros.

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
344 visualizações
344 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021
Como se tornar um Engenheiro DevOps em 2021
Artigos
323 visualizações
323 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
291 visualizações
291 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021