HTML – Local Storage

Com o surgimento do HTML5 foram aplicadas diversas soluções que podemos tirar o maximo de proveito.
Entre estas soluções está a maravilhosa API Web Storage que nos possibilita armazenar dados de navegação localmente sem o uso de cookies, este armazenamento local torna a navegação mais fluida e com menos fluxo de dados.

Ela se divide em dois tipos de storages: sessionStorage e localStorage.

localStorage

LocalStorage armazena os dados sem data de validade. Os dados não serão apagados quando o navegador é fechado, e estará disponível no dia seguinte, semana ou ano.

No exemplo abaixo estamos guardando o valor “Antonio” no campo nome e depois recupetando o valor em uma mensagem:

// Armazenar
localStorage.setItem("nome", "Antonio");
// Recuperar
alert("Nome do cidade: " localStorage.getItem("nome"));

A mesma rotina pode ser escrita da mesma forma:

// Armazenar
localStorage.nome = "Antonio";
// Recuperar
alert("Nome do cidade: " localStorage.nome);

Para remover um item do localStorage segue a forma:

localStorage.removeItem("nome");

sessionStorage

O sessionStorage é igual ao localStorage, exceto que ele armazena os dados para apenas uma sessão. Os dados são apagados quando o usuário fecha a aba do navegador específico.
Para utilizar a sessionStorage é a mesma maneira que o localStorage aspenas substituindo a palavra local por session:
Armazenar valor em sessionStorage

// Armazenar
sessionStorage.setItem("nome", "Antonio");
// Recuperar
alert("Nome do cidade: " sessionStorage.getItem("nome"));

Tambem podendo ser escrito desta forma:

// Armazenar
sessionStorage.nome = "Antonio";
// Recuperar
alert("Nome do cidade: " sessionStorage.nome);

Para remover o item da sessionStoragecomo dito anteriormente basta fechar a aba ou o navegador, más se não for possivel basta executar a seguinte rotina.

sessionStorage.removeItem("nome");

Compatibilidade:
Fique atento pois nem todos os navegadores são compatíveis com está novidade, confira os navegadores e versões compatíveis abaixo

Por segurança antes de usar rotinas com estes recurso faça um teste de compatibilidade:

if(typeof(Storage) !== "undefined") {
    // Compativel com localStorage/sessionStorage.
} else {
    // O navegado não suporta este recurso!.
}