HTML 5 Database Storage

Para quem está acompanhando as novas definições para HTML 5 já deve ter ouvido falar de tags como CANVAS, VIDEO, etc.
Mas uma das novas features as quais eu considero sensacional é o armazenamento interno de dados no navegador, não mais através de cookies, e sim utilizando um espaço especifico do aplicativo que permite guardar e organizar estas informações como em um banco de dados.

Até o momento essa feature já foi disponibilizada na última versão do Webkit, presente no Safari 4.
Um exemplo prático desta implementação esta em: http://webkit.org/demos/sticky-notes/ .
Neste caso foi criada uma aplicação que simula post-it´s que podem ser movidos e escritos em uma espécie de mural.

As informações de texto e posicionamento do conteúdo são armazenados em uma base de dados interna do navegador, com uma tabela especifica da aplicação.

Veja a imagem abaixo, onde através do Web Inspector podemos visualizar os dados armazenados:

O interessante disso tudo é que pelo menos no Safari o armazenamento é feito utilizando-se SQL LITE.

No fonte podemos visualizar como as query´s são executadas:

<font color="#cc0000">function loaded()
{
    db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
            loadNotes();
        }, function(tx, error) {
            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { 
                loadNotes(); 
            });
        });
    });</font>
<font color="#cc0000">}</font>

Espero que esta definição continue sendo seguida, e que no futuroa a Microsoft não invente de implementar isso no IE utilizando uma outra estrutura e até sintaxe de acesso aos dados.

Mais informações em : http://www.whatwg.org/specs/web-apps/current-work/

No Firefox 3.5: https://developer.mozilla.org/en/DOM/Storage

No Internet Explorer: http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx