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”.

Posts relacionados:

1. HTML5: Video Player
2. Javascript Game Engine for HTML5 Canvas