HTML5 - Web Storage

Web Storage é um recurso do HTML 5 para armazenamento de dados localmente no navegador.

07 Janeiro 2016

Web Storage é um recurso do HTML 5 para armazenamento de dados localmente no navegador.

Embora ainda possamos utilizar os cookies para armazenar dados no navegador, existem algumas desvantagens em sua utilização.

Desvantagens do uso de Cookies:

  • O limite de armazenamento de Cookies em navegadores web é limitado em 4KB.
  • Os cookies são enviados com cada solicitação HTTP, atrasando assim o desempenho de aplicações web.

HTML5 - Web Storage

Os dados são armazenados em forma de chave/valor, permitindo o armazenamento de até 10 MB de dados por domínio. Ao contrário de cookies, os dados armazenados não são incluídos com cada solicitação HTTP.

Tipos de armazenamento:

  • O armazenamento local (localStorage): Armazena dados sem data de validade. Os dados estarão disponíveis mesmo quando o navegador é fechado.
  • Armazenamento de sessão (sessionStorage): Armazena dados para uma sessão. Os dados serão apagados assim que o usuário fechar o navegador.

Exemplo:

/* 
 * VERIFICANDO O SUPORTE AO RECURSO
 * IE7 e versoes mais antigas nao suportam Web Storage. 
 * Todos os outros navegadores como o Chrome, Opera, Firefox, Safari e IE8+ tem suporte Web Storage.
 */
if (typeof(Storage) !== "undefined") {
	 // codigo localStorage/sessionStorage
} else {
	// navegador noo suporta HTML5 - Web Storage
}

Utilizamos o setItem('key','value') para armazenar uma informação.

/*
 * armazenando o valor [Daniel Wisky] na chave [nome]
 */
localStorage.setItem("nome", "Daniel Wisky"); // ou sessionStorage.setItem("nome", "Daniel Wisky");

Utilizamos o getItem('key') para recuperar uma informação armazenada.

/*
 * recuperando o valor da chave [nome]
 */
localStorage.getItem("nome"); // ou sessionStorage.getItem("nome");

Utilizamos o removeItem('key') para remover uma informação armazenada.

/*
 * removendo o valor armazenado na chave [nome]
 */
localStorage.removeItem("nome"); // ou sessionStorage.removeItem("nome");

Para saber mais: tableless, w3schools.

Um grande abraço e até o próximo post!