O documento discute as APIs SessionStorage e LocalStorage do HTML5 para armazenamento de dados no navegador do usuário. A SessionStorage armazena dados por curto período de tempo, enquanto a LocalStorage armazena dados de forma persistente até serem apagados. O documento fornece exemplos de como implementar essas APIs e controlar o armazenamento para evitar erros.

1. HTML5
Web Storage
SessionStorage & LocalStorage
alexandreporfirio.com 1

2. Como bom desenvolvedor você procura uma solução para gravar dados do
lado do usuário de forma persistente, porém quais seriam as suas
alternativas; cookies ou sessions?
O HTML5 acrescentou ou até mesmo ampliou esta posibilidade com duas
novas APIs para navegadores possibilitando o armazenamento
de dados de forma persistente:
- SessionStorage - Como o próprio nome já diz "Session
Storage", armazenamento de dados por curto período de tempo.
- LocalStorage - Armazenamento de dados de forma persistente, ou
seja, os dados ficarão salvos até serem apagados intencionalmente.
A grande diferença entre as duas APIs consiste no tempo de
armazenamento dos dados que o navegador vai utilizar localmente.
alexandreporfirio.com 2

3. • Implementando:
A primeira coisa a fazer é testar se a versão do seu browser(navegador)
suporta as APIs de armazanamento local.
Ex.: var storage_support = window.sessionStorage || window.localStorage;
O código abaixo é um simples exemplo do uso da SessionStorage:
var user_id = "A109";
var user_data = {
name: "Alexandre",
occupation: "Desenvolvedor",
favorite_color: "Azul"
};
alexandreporfirio.com 3

4. Já neste código usamos a LocalStorage:
var user_id = "A109";
var user_prefs = {
keep_me_logged_in: true,
start_page: "alexandreporfirio.com"
};
localStorage.setItem(user_id, JSON.stringify(user_prefs));
*Observe que as implementações são muito semelhantes.
alexandreporfirio.com 4

5. Vimos como guardar os dados no navegador de forma local.
Vamos agora resgatar tudo que foi salvo:
var user_id = "A109";
var user_data = { };
var user_prefs = { };
if (sessionStorage.getItem(user_id)) {
user_data = JSON.parse(sessionStorage.getItem(user_id));
}
if (localStorage.getItem(user_id)) {
user_prefs = JSON.parse(localStorage.getItem(user_id));
}
alexandreporfirio.com 5

6. Qual das duas devo usar?
A SessionStorage por ter um tempo de vida curto é muito utilizada
para guardar dados de login do usuário, carrinho de compras, etc..
A LocalStorage parece ser a melhor opção por oferecer vida longa aos
dados armazenados permitindo uma infinidades de possibilidades.
alexandreporfirio.com 6

7. Algumas APIs usadas para sessionStorage e
localStorage:
• getItem(key) - Retorna um item de dados a partir do recipiente de
armazenamento, referenciada pela sua chave(key)
• setItem(key, item) - Adiciona um item de dados para o recipiente de
armazenamento, referenciado por sua chave.
• key(index) - Retorna a chave para um item de dados no índice
especificado.
• removeItem(key) - Remove o item do recipiente de
armazenamento, indexado por sua chave.
• clear() - Apaga todos os dados do recipiente.
• Length - Identifica o número de itens guardados no recipiente.
alexandreporfirio.com 7

8. Armazenamento
A maioria dos navegadores oferecem limite de 5 MB para armazenamento
local.
Porém prováveis erros poderão surgir quando a capacidade de
armazenamento ultrapassar este limite. Embora 5 MB pareça ser muito
para armazenamento local, este limite é facilmente atingido bem mais
rápido do que se imagina, isto geralmente ocorre pela falta de tratamento
adequado a dados antigos e esquecidos armazenados no navegador.
alexandreporfirio.com 8

9. Controlando armazenamento
Uma solução para este problema seria a implementação de um mecanismo
de expiração automático, através de um comando tipo "timestamp" que
verifica a cada carregamento de página se algum dado expirou dentro de
espaço de tempo estipulado.
alexandreporfirio.com 9

10. Exemplo de controle: seu site de comércio eletrônico pode
manter um registro de um usuário que expira em 21 dias:
var current_item = {
id: "A109",
data: "H' Sapatos",
ts: new Date() // timestamp da data atual, usada para comparar com datas
};
localStorage.setItem(current_item.id, JSON.stringify(current_item));
var key, data;
for (var i=0; i<localStorage.length; i++) {
key = localStorage.key(i);
data = localStorage.getItem(key);
if (data.ts < ((new Date()) - 60*60*24*21)) { // verifica se tem mais de 21 dias
para remoção
localStorage.removeItem(key);
}
} alexandreporfirio.com 10

11. *Maiores informações sobre WebStorage acesse:
https://developer.mozilla.org/en/dom/storage
Por Alexandre Porfírio
alexandreporfirio.com 11