E aí galerinha, como estão?

Hoje eu vou mostrar como utilizar as interfaces SessionStorage e LocalStorage do HTML5.

Estas duas interfaces fazem parte da especificação Web Storage da W3C.

Esta API tem a finalidade de acabar com os famosos Cookies, salvando uma grande quantidade de informação no cliente e resgatando a informação salva de uma forma simples e segura.

Então vamos pensar em que funcionalidades a Storage API tem vantagem sobre os cookies. Vou listar algumas vantagens bem relevantes da Storage API:

• Storage API pode salvar até 5MB de espaço no disco do usuário, enquanto os Cookies armazenam míseros 4kb;
• Os dados não são trafegados a cada requisição do servidor, como acontece nos Cookies;
• Funciona como um Array Associativo (key, value);
• Diferente dos Cookies, não possui data de expiração (falarei sobre isso abaixo)

A SessionStorage e a LocalStorage possuem os seguintes métodos:

• key(n) para retornar o nome da chave que está nesta posição da Storage
• getItem(key) para retornar o valor associado a uma chave
• setItem(key,value) para associar um determinado valor a uma chave, ou criar a chave e associar um valor a ela
• removeItem(key) para remover determinada chave e o valor associado a ela
• clear() para limpar o Storage

As duas interfaces além destes métodos possuem o atributo length, que mostra o número de chaves na interface.

Agora vocês devem estar pensando “As duas interfaces tem o mesmos atributos e métodos. Por que diabos existes as duas?”.

A diferença entre as duas interfaces está em quando os dados são expirados.

Na SessionStorage os dados salvos expiram quando o usuário fecha o navegador. Na LocalStorage os dados salvos simplesmente não expiram. Sim, os dados não tem data de expiração. Só são apagados quando o desenvolvedor ou o usuário os apagam.

Uma coisa importante é que se você deve ficar atento com o domínio que está sendo utilizado na sua aplicação. Uma Storage funciona apenas para o domínio corrente, diferente dos cookies. Então se eu salvar uma LocalStorage em http://hussani.com.br, o site http://www.abstraindo.com não terá acesso aos dados. O mesmo acontece quando você salva dados sem o “www.” e tenta acessar os dados em um endereço do mesmo domínio com o “www.” (exemplo: os dados salvos em http://www.abstraindo.com não podem ser acessados por http://abstraindo.com). Isso garante que os dados não fiquem abertos para que qualquer site vasculhe nas informações contidas nas Storages.

Então galera, cuidado com os endereços da sua aplicação.

A Storage API está disponível para IE8+, Firefox 5+, Chrome 4+, Safari 4+, Opera 10.5+, e também está disponível em todas as versões de Android Browser e iOS Safari. Então vamos codar!

Vamos colocar a mão na massa com uma pequena demonstração. Vocês podem ver a demostração aqui.

Nesta demonstração é apresentado um exemplo simples de como usar a interface LocalStorage. Poderíamos utilizar SessionStorage também, o resultado seria o mesmo.

Só irei colocar as partes importantes do código e se vocês quiserem o código da demonstração completa podem baixar aqui.

Esta é a estrutura principal da página

    <div class="wrapper">
        <section id="com-storage" class="box-list">
            <h3>Com Local Storage</h3>
            <ul id="stored-list" contenteditable="true">
                <li></li>
            </ul>
            <button id="clear">Limpar</button>
        </section>

        <section id="sem-storage" class="box-list">
            <h3>Sem Local Storage</h3>
            <ul id="not-stored-list" contenteditable="true">
                <li> </li>
            </ul>
        </section>
    </div>

Neste bloco criamos duas seções com listas editáveis. Em um usaremos a LocalStorage para salvar os dados e na outra não usaremos nenhum Storage.

Agora vamos montar o Storage. Utilizei o jQuery para auxiliar na manipulação de JavaScript, nada difícil, e a biblioteca Modernizr para verificar se o browser tem suporte a API de Storage. Para verificar se há suporte fiz desta forma:

$(function(){
  if(Modernizr.localstorage){
    /* codigo aqui */
  }else{
/* callback se o browser não suportar a localstorage */
}
});

Simples, não é?
Vamos agora salvar os dados da lista quando o usuário editá-la

$("#stored-list").keypress(function(){
  localStorage.setItem('minha-lista', $("#stored-list").html());
});

O que eu fiz acima: quando algo for alterado na lista com o id “stored-list” eu salvo o conteúdo html da lista em um localstorage com a chave “minha-lista”.

Pronto já salvamos conteúdo em um LocalStorage. \o/

Agora vamos recuperar o valor da chave “minha-lista” sempre que página for recarregada.

if(localStorage.getItem('minha-lista')){
  $('#stored-list').html(localStorage.getItem('minha-lista'));
}

Note que antes de retornar o valor, nós verificamos se existe algo relacionado a chave. Se houver algum valor ele é escrito dentro da lista.

Pronto! Agora nós conseguimos salvar os conteúdos e conseguimos resgatar eles. Mas e se eu quiser apagar a lista e fazer uma nova?

$('#clear').click(function(){
  localStorage.clear();
  $('#stored-list').html('<li> </li>');
});

Muito simples também! Quando eu clicar no botão com id “clear” eu aciono o método clear que apaga todos os dados do LocalStorage.

Como só utilizamos uma chave para armazenar a lista, podemos apagar ela de uma outra forma:

$('#clear').click(function(){
  localStorage.removeItem('minha-lista');
  $('#stored-list').html('<li> </li>');
});

Isso apaga apenas a chave “minha-lista” e seu conteúdo.

Bem galera, acho que é isso. Espero que vocês tenham gostado.

Qualquer dúvida, crítica ou aflição deixe um comentário.

Até a próxima pessoal.

html5, javascript, storage