Nesta aula, vamos aprender como armazenar dados no navegador do usuário utilizando JavaScript. O armazenamento local é essencial para criar aplicações web que mantêm estado entre páginas ou sessões, melhorando a experiência do usuário e reduzindo a necessidade de requisições ao servidor.

Existem três mecanismos principais: localStorage, sessionStorage e cookies. Cada um tem suas características, limites e casos de uso. Vamos entender como funcionam, quando usar cada um e quais cuidados de segurança devemos tomar.

localStorage e sessionStorage

O localStorage e o sessionStorage fazem parte da API Web Storage, que permite armazenar pares de chave-valor de forma simples e síncrona. Ambos são específicos de origem (protocolo + domínio + porta) e não são enviados automaticamente ao servidor.

O localStorage persiste os dados mesmo após o navegador ser fechado, enquanto o sessionStorage mantém os dados apenas durante a sessão da página (até a aba ser fechada). Exemplo de uso:

// Armazenar no localStorage
localStorage.setItem('nome', 'João');

// Recuperar
const nome = localStorage.getItem('nome');
console.log(nome); // "João"

// Remover
localStorage.removeItem('nome');

// Limpar tudo
localStorage.clear();

// sessionStorage funciona da mesma forma
sessionStorage.setItem('temporario', 'valor');

É importante notar que os valores são armazenados como strings. Para objetos, use JSON.stringify e JSON.parse:

const usuario = { id: 1, nome: 'Maria' };
localStorage.setItem('usuario', JSON.stringify(usuario));

const usuarioRecuperado = JSON.parse(localStorage.getItem('usuario'));
console.log(usuarioRecuperado.nome); // "Maria"

Cookies (introdução)

Cookies são pequenos arquivos de texto armazenados no navegador, enviados automaticamente ao servidor em cada requisição HTTP. Eles são frequentemente usados para gerenciar sessões, rastreamento e preferências do usuário.

Em JavaScript, podemos ler e escrever cookies através da propriedade document.cookie. Exemplo:

// Definir um cookie que expira em 7 dias
const dias = 7;
const data = new Date();
data.setTime(data.getTime() + dias * 24 * 60 * 60 * 1000);
document.cookie = `usuario=João; expires=${data.toUTCString()}; path=/`;

// Ler todos os cookies
console.log(document.cookie); // "usuario=João"

// Para obter um cookie específico, é necessário parsear
function getCookie(nome) {
  const cookies = document.cookie.split('; ');
  for (let c of cookies) {
    const [chave, valor] = c.split('=');
    if (chave === nome) return valor;
  }
  return null;
}
console.log(getCookie('usuario')); // "João"

Cookies têm limitações: tamanho máximo de cerca de 4KB, são enviados em toda requisição (impactando performance) e podem ser vulneráveis a ataques como XSS se não forem configurados adequadamente.

Limites e segurança

O armazenamento local (localStorage e sessionStorage) tem limite de cerca de 5MB por origem, mas pode variar entre navegadores. Cookies têm limite de 4KB e no máximo 20 cookies por domínio (segundo especificação).

Em termos de segurança, dados sensíveis nunca devem ser armazenados em localStorage ou sessionStorage, pois são acessíveis via JavaScript e vulneráveis a XSS. Cookies podem ser marcados como HttpOnly (inacessíveis via JavaScript) e Secure (enviados apenas via HTTPS) para maior segurança. Exemplo de cookie seguro:

document.cookie = "sessao=abc123; Secure; HttpOnly; SameSite=Strict";

Boas práticas: use localStorage para dados não sensíveis e que precisam persistir (como preferências de tema), sessionStorage para dados temporários (como estado de formulário), e cookies apenas quando necessário comunicação automática com o servidor, sempre com flags de segurança.

Referências

Exercícios

  1. Exercício 1: Armazene o nome do usuário no localStorage e exiba-o em um alert. Se não houver nome armazenado, solicite via prompt e armazene.

    2. ✓ Resposta:
    let nome = localStorage.getItem('nome');
if (nome) {
  alert('Olá, ' + nome);
} else {
  nome = prompt('Qual seu nome?');
  localStorage.setItem('nome', nome);
}
  2. Exercício 2: Crie um contador de visitas usando sessionStorage. A cada carregamento da página, incremente e exiba o número de visitas na sessão atual.

    3. ✓ Resposta:
    let contador = sessionStorage.getItem('contador');
if (contador) {
  contador = parseInt(contador) + 1;
} else {
  contador = 1;
}
sessionStorage.setItem('contador', contador);
console.log('Visitas nesta sessão: ' + contador);
  3. Exercício 3: Armazene um objeto JavaScript (ex: {nome: 'Ana', idade: 25}) no localStorage como JSON e depois recupere-o, exibindo as propriedades no console.

    4. ✓ Resposta:
    const pessoa = { nome: 'Ana', idade: 25 };
localStorage.setItem('pessoa', JSON.stringify(pessoa));

const recuperado = JSON.parse(localStorage.getItem('pessoa'));
console.log(recuperado.nome); // "Ana"
console.log(recuperado.idade); // 25
  4. Exercício 4: Defina um cookie chamado 'tema' com valor 'escuro' que expire em 1 hora. Depois, leia o cookie e exiba seu valor no console.

    5. ✓ Resposta:
    const agora = new Date();
agora.setTime(agora.getTime() + 60 * 60 * 1000); // 1 hora
document.cookie = `tema=escuro; expires=${agora.toUTCString()}; path=/`;

function getCookie(nome) {
  const cookies = document.cookie.split('; ');
  for (let c of cookies) {
    const [chave, valor] = c.split('=');
    if (chave === nome) return valor;
  }
  return null;
}
console.log(getCookie('tema')); // "escuro"
  5. Exercício 5: Remova todos os itens do localStorage e do sessionStorage, e também delete o cookie 'tema' criado no exercício anterior.

    6. ✓ Resposta:
    // Limpar localStorage
localStorage.clear();

// Limpar sessionStorage
sessionStorage.clear();

// Deletar cookie 'tema' definindo uma data passada
document.cookie = 'tema=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';