HTML5: Database
Uma das funcionalidades mais robustas presentes nessa nova versão do HTML é exatamente o suporte ao armazenamento local, sem ser por Cookie mas sim pelo banco de dados presente no browser. Tal funcionalidade já está presente no Webkit que fornece uma aplicação de exemplo: http://webkit.org/demos/sticky-notes/.
No Webkit as informações são armazenadas utilizando SQLite, e acredito que o Firefox irá pelo mesmo caminho, já que ele também utiliza o SQLite para armazenar os “Favoritos”.
Para abrir a conexão com a banco de dados (openDatabase) deve-se informar o nome do banco (database name), a versão (database version), o nome de exibição (display name) e o tamanho estimado em bytes (estimated size) que será armazenado.
var db;
try {
if (window.openDatabase) {
db = openDatabase("MyDB", "1.0", "HTML5 Database Example", 200000);
if (!db) {
alert("Failed to open the database.");
}
} else {
alert("Couldn't open the database.");
}
} catch(err) { }
Uma vez estabelecida a conexão a interação passa ser efetuada através de comandos SQL.
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE myTable (id REAL UNIQUE, name TEXT, description TEXT, timestamp REAL");
});
db.transaction(function (tx) {
tx.executeSql("INSERT INTO myTable (id, name, description, timestamp) VALUES (?, ?, ?, ?)", [id, name, description, timestamp]);
});
db.transaction(function(tx) {
tx.executeSql("DELETE FROM myTable WHERE id = ?", [id]);
});
db.transaction(function(tx) {
tx.executeSql(
"SELECT * FROM myTable WHERE id = ?",
[id],
function(tx, result) {
// success
if (result.rows.length > 0) {
alert("My name is: " + result.rows.item(0)['name']);
} else {
alert("Sorry, no result for this id");
}
},
function(tx, error) {
// error
alert("Error when try retrieve data: " + error.message);
}
);
});
O método executeSql pode receber 4 parâmetros, sendo eles:
- O SQL a ser executado
- Os valores parametrizados para serem utilizados na consulta (array)
- Função callback para ser executada caso haja sucesso (onSuccess)
- Função callback para ser executada caso haja falha (onError)
Sinceramente eu achei muito legal conceder mais esse poder ao Javascript no HTML5, porém “com grandes poderes vêm grandes responsabilidades”.




Parabéns pelo post!
ficou muito bom e objetivo.
Mas ainda não consigo saber se isso é bom ou ruim.
Isso me parece “dar metralhadoras a macacos”; pois se o _programador_ superestimar o tamanho do banco, o usuário vai sofrer um pouco.
Foi o que você citou na sua conclusão, parafraseando o Tio Ben em uma conversa com seu sobrinho Peter Parker.
Estou imaginando várias páginas (abas/guias) com vários JSs abrindo conexões com o SQLite.
Aquele abraço!
meu Deus, não sabia dessa!
vlw Rogério por informar o pessoal a respeito disso!
“com grandes poderes vêm grandes responsabilidades”.
concordo totalmente! \o/
Aaaah esqueci de falar… infelizmente no Chrome ainda não foi aplicado!
Pelo menos o demo não rolou aqui. (versão 5.0 do Chrome)
[...] http://rogeriolino.com/2010/03/11/html5-database/ Tags: cookie, database, db, firefox, html5, Javascript, safari, sql, sqlite, webkit [...]
Salve!!
Ótimo exemplo de utilização do poder do HTML5.
Parabéns.
by reiwolf
Q o padrão a ser seguido seria algo como SQLite eu já sabia. Oque pode evitar a “metralhadora na mão de macacos” são as restrições impostas pelos navegadores (oque deve falhar como sempre).
Algumas são: 2MB de base de dados (ao menos no iPhoneOS), teoricamente em ambientes como o Windows, Mac e Linux o limite de um banco SQLite é de 5GB (medo).
Eu entendo que eles criaram essa funcionalidade para os desenvovedores armazenarem tabelas de vista temporárias em maquinas clientes. Mas não duvido que alguem ache que pode fazer um sistema completo num ambiente sem segurança.
As informações na base de dados ficam acessiveis ao usuario ou não?
Att,