HTML5 #1: localStorage

Olá pessoal, tudo certo?

Hoje iniciarei uma série de posts falando, como vocês devem ter imaginado, de HTML5. Para iniciar, irei falar de localStorage que é uma API muito interessante dentro do HTML5.

A API!

Você pode conferir a API de localStorage aqui. Vamos ao que interessa, com localStorage você consegue salvar dados no computador do seu usuário (lembra que você usava cookies para isso, pois bem, agora tem localStorage). A grande jogada em usar localStorage é que você guarda os valores num formato chave/valor e ainda possui um evento que o notifica em caso de alterações na área de armazenamento.

Vamos ver como funciona o localStorage então. É bem simples, 🙂


// formato padrão com chave/valor

window.localStorage["chave"] = "valor";

// utilizando um método acessor

window.localStorage.setItem("outra_chave", "outro_valor");

Falei, é simples! Lembrando que os dados são guardados como strings.

Outros métodos da interface Storage.


window.getItem("chave"); // pega o valor "chave", também poderia ser window.locaStorage["chave"];

window.localStorage.removeItem("chave"); // remove o item chave

window.localStorage.clear(); // limpa todos os pares chave/valor

Vamos à um caso interessante agora. Imagine que você possui uma página de e-commerce e seu usuário abre duas abas no browser para escolher produtos, neste momento ele seleciona um produto com o valor R$100 em uma das abas e você usa localStorage para armazenar os valores de compra. Como você pode fazer para que na outra aba apareça o valor R$100 do produto? Se você pensou em eventos, você acertou!

A API Storage possui um evento chamado “storage“, este é disparado quando a área de armazenamento é alterada, facilitando assim a troca de dados entre as abas do navegador e também garantindo que os dados sejam atualizados em todas as instâncias (abas).

O evento storage.

window.addEventListener("storage", function(e)
{
// aqui você implementa as atualizações necessárias
}, false);

// você também pode fazer assim, mas recomendo a abordagem acima
window.onstorage = function(e)
{
// implementação
};

Bem, e como saber o que foi alterado entre uma e outra aba? A interface do evento Storage possui alguns atributos que lhe auxiliam.

window.addEventListener("storage", function(e)
{
    // key é a chave que foi alterada
    // oldValue valor anterior da chave
    // newValue novo valor da chave
    window.alert(e.key + " de " + e.oldValue + " para " + e.newValue);
}, false);

Outros atributos você pode encontrar na especificação clicando aqui.

Vamos à outro dilema, você possui um objeto no formato JSON e gostaria de guardá-lo como um par chave/valor no localStorage do navegador, mas a API apenas suporta strings, como fazer então? Existem dois métodos que podem lhe auxiliar com isso, JSON.stringify() e JSON.parse(), vejamos como eles funcionam.

var objeto = {nome: "Joãozinho", idade: 19};
window.localStorage["meu_objeto"] = JSON.stringify(objeto);
var recuperandoObjeto = JSON.parse(window.localStorage["meu_objeto"]);
window.alert(recuperandoObjeto.nome + ": " + recuperandoObjeto.idade);

Claro, ficar transformando objetos em strings e vice-versa requer um bom uso da CPU, por isso, só use objetos quando for realmente necessário.

O exemplo!

Agora que conhecemos um pouco da API Storage do HTML5, vamos à um exemplo. Criei este fiddle, mostrando um formulário que salva os dados em localStorage e lhe permite preencher em diferentes abas atualizando os campos nas mesmas. As mensagens e a programação está em inglês, espero não ser um problema, :). Os fontes também estão no github.

O Fim do post!

Esta é foi introdução ao que é possível ser feito com localStorage no HTML5. É uma API muito interessante e a maioria dos navegadores a suporta atualmente, você pode conferir o suporte a localStorage clicando aqui.

Até mais galera!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s