HTML e SQLite: Como Usar SELECT, INSERT e UPDATE no Navegador
Se você deseja criar aplicações web interativas sem utilizar linguagens de servidor como PHP, Python ou Node.js, a integração entre HTML, JavaScript e SQLite com a biblioteca sql.js pode ser uma excelente alternativa. Neste artigo, você vai aprender como realizar operações como SELECT, INSERT e UPDATE diretamente no navegador, sem necessidade de backend.
O Que é o sql.js?
A sql.js é uma biblioteca JavaScript que permite usar um banco de dados SQLite diretamente na memória do navegador, por meio da compilação do SQLite em WebAssembly. Isso é ideal para testes, protótipos e até aplicativos offline ou locais.
Configuração Inicial
Para começar, você precisa importar o script da biblioteca. Adicione a seguinte linha ao seu HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>
Você também precisará de um banco de dados SQLite pré-criado no formato binário, como database.sqlite, hospedado em seu servidor ou pasta local.
Exemplo 1 – Consulta SELECT com sql.js
Veja abaixo como realizar uma consulta SELECT no banco de dados:
<div id="resultado"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'database.sqlite', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
var uInt8Array = new Uint8Array(this.response);
var db = new SQL.Database(uInt8Array);
var resultado = db.exec("SELECT * FROM tabela");
document.getElementById("resultado").innerHTML = JSON.stringify(resultado, null, 2);
};
xhr.send();
</script>
Exemplo 2 – Consulta INSERT e UPDATE
Agora, veja como executar comandos INSERT e UPDATE usando a mesma biblioteca:
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'database.sqlite', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
var uInt8Array = new Uint8Array(this.response);
var db = new SQL.Database(uInt8Array);
// INSERT
db.run("INSERT INTO tabela (coluna1, coluna2) VALUES ('valor1', 'valor2')");
// UPDATE
db.run("UPDATE tabela SET coluna1 = 'novo_valor' WHERE coluna2 = 'valor2'");
};
xhr.send();
</script>
Vantagens de Usar SQLite com HTML
- Funciona totalmente offline, ideal para PWA (Progressive Web Apps).
- Dispensa backend, reduzindo a complexidade de hospedagem.
- Ótimo para testes e prototipação rápida.
- Compatível com diversos navegadores modernos.
Considerações Importantes
Embora a abordagem seja extremamente útil, há limitações:
- O banco de dados só é carregado na memória e não persiste entre recarregamentos da página.
- Não é indicado para armazenar dados confidenciais, pois o conteúdo pode ser acessado pelo usuário.
Conclusão
Utilizar HTML + JavaScript + SQLite com sql.js é uma maneira prática de simular operações de banco de dados diretamente no navegador. Os exemplos de SELECT, INSERT e UPDATE apresentados neste artigo demonstram a versatilidade da biblioteca, permitindo aplicações locais robustas sem backend.
Para mais detalhes e documentação completa, acesse o repositório oficial no GitHub: sql.js no GitHub.
Deixe seu comentário abaixo 👇