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

Para todos aqueles que odeiam o flash player e adoram assistir vídeos pela Internet, alguns portais de vídeos possuem uma alternativa ao plugin da Adobe para que os usuários possam assistir seus vídeos sem precisar de um plugin externo que pode deixar o browser mais lento e ocasionar travamentos. Isso se dá com a utilização [...]

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE. Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS. Há duas maneiras de se fazer isso sem muito trabalho. A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]

Esses dias instalei aqui em casa um plugin novo para o Firefox. Trata-se de um dicionário em português. Não sabia muito bem para que “servia” (é um dicionário oras) mas acabei instalando assim mesmo. E hoje ao responder uma mensagem no Orkut, vi que todas as palavras escritas erradas, ou simplesmente abreviadas (internetês), estavam sublinhadas. [...]

Aqui vão algumas dicas de extensões para deixar seu Firefox muito mais robusto e personalizado. Extensão e uma breve descrição. FireFTP – que tal conectar ao ftp pelo Firefox. Rápido e seguro. IE View Lite – para você poder visualizar como está ficando seu código no Internet Explorer sem sair do Firefox. IE Tab – [...]