HTML5 #2: sessionStorage

Olá pessoal, tudo certo?

Hoje vamos continuar com o HTML5. No último post falei sobre localStorage e hoje falarei de sessionStorage. Da mesma maneira que o localStorage, sessionStorage guarda dados no browser do usuário evitando o uso de cookies para determinadas tarefas. Vamos ver como funciona o sessionStorage então!

A API!

Neste link você encontra a especificação da API storage que é a mesma para localStorage e sessionStorage, a diferença entre estas está no comportamento quanto ao armazenamento dos dados. Com o localStorage os dados são guardados até o programador apagá-los ou o usuário resolver excluí-los. Com sessionStorage os dados são armazenados apenas durante a navegação (contexto de navegação), ou seja, se o usuário fechar a janela/aba do navegador os dados são apagados. A API é a mesma, então, da mesma forma como localStorage é simples, sessionStorage também é!


window.sessionStorage["item"] = "valor";
window.sessionStorage.setItem("chave", "valor");

Utilizando sessionStorage os dados também são armazenados como strings, ou seja, se você precisa guardar um objeto ou array, pode-se utilizar as funções de JSON disponíveis, sendo elas: JSON.stringify() e JSON.parse().


var obj = {nome: "Joãzinho"};
var strObj = JSON.stringify(obj);
window.sessionStorage.setItem("obj", strObj);
var parseObj = JSON.parse(window.sessionStorage["obj"]);
alert(parseObj.nome);

Como sessionStorage implementa a interface Storage, todos os métodos que vimos em localStorage estão definidos, sendo eles:


window.sessionStorage.clear(); // limpa todos os dados
window.sessionStorage.removeItem("item"); // limpa a chave indicada
window.sessionStorage.getItem("chave"); // busca a chave indicada

Outra diferença entre sessionStorage e localStorage, fica no evento storage. Enquanto localStorage notifica as abas/páginas abertas que a área de armazenamento foi alterada, sessionStorage notifica apenas as páginas que compartilham a mesma origem e contexto de navegação. É algo meio complicado, segue a resposta de Ian Hickson do grupo whatwg. A ideia é que o evento será disparado em páginas que estiverem no mesmo contexto, ou seja, se você possuir um iframe e este possuir um evento storage, o iframe será notificado da alteração.

Abaixo nos exemplos, há o link para o projeto no github com um modelo mais especializado mostrando de uma forma mais detalhado o uso do evento storage com sessionStorage. O exemplo está nos fontes iframe_sessionStorage_storeEvent.htmlsession_storageEvent.html.

O exemplo!

Para este post, criei dois exemplos, um mostrando o uso de eventos com sessionStorage e outro que armazena uma mensagem e exibe a mesma. A ideia é mostrar o que se pode fazer com sessionStorage, visto que os dados são armazenados apenas no contexto de navegação. Segue o fiddle para o exemplo da mensagem e estes fontes também estão no github. Da mesma forma que nos outros exemplos, criei algumas funções para verificar certas funcionalidades, e evitar erros caso certos métodos/atributos estejam indefinidos.

O fim do post!

Hoje vimos como funciona sessionStorage e suas diferenças quanto à localStorage. Também vimos como a API webstorage trouxe grandes auxílios para o armazenamento de dados e comunicação entre páginas do mesmo contexto, seja com localStorage ou sessionStorage. É isso! Abraço, até a próxima!

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