Introdução ao Armazenamento Local no Navegador

Existem três principais abordagens para armazenamento local no navegador: Cookie, Web Storage e IndexedDB. Cada uma atende a diferentes necessidades, desde dados de sessão simples até grandes volumes de dados estruturados.

Cookie

O protocolo HTTP é sem estado, o que significa que o servidor não pode rastrear sessões de forma inerente. Os Cookies resolvem isso atuando como pequenos fragmentos de texto armazenados no navegador. Eles são enviados automaticamente em cada solicitação para o mesmo domínio, permitindo que o servidor identifique usuários. Tradicionalmente, os Cookies são usados para informações como estado de login ou preferências, mas não são ideais para dados extensos devido a limitações de tamanho.

Características

• Vantagens: Amplamente compatível com todos os navegadores modernos e legados.
• Desvantagens: Capacidade limitada (aproximadamente 4KB), sobrecarga de desempenho devido ao envio em cada solicitação, riscos de segurança (dados sensíveis devem ser evitados), e possível desativação pelo usuário.

Exemplo de Código

Abaixo está uma implementação simplificada de um leitor/escritor de Cookie com suporte a Unicode, reestruturado para clareza.

const gerenciadorCookies = {
  obter: function(chave) {
    const nomeCodificado = encodeURIComponent(chave);
    const correspondencia = document.cookie.match(new RegExp('(?:^|;\\s*)' + nomeCodificado.replace(/[-.+*]/g, '\\$&') + '\\s*=\\s*([^;]*)'));
    return correspondencia ? decodeURIComponent(correspondencia[1]) : null;
  },
  definir: function(chave, valor, expiracao, caminho, dominio, seguro) {
    if (!chave || /^(?:expires|max\-age|path|domain|secure)$/i.test(chave)) return false;
    let strExpiracao = '';
    if (expiracao) {
      switch (typeof expiracao) {
        case 'number':
          strExpiracao = expiracao === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : '; max-age=' + expiracao;
          break;
        case 'string':
          strExpiracao = '; expires=' + expiracao;
          break;
        case 'object':
          if (expiracao instanceof Date) strExpiracao = '; expires=' + expiracao.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(chave) + '=' + encodeURIComponent(valor) + strExpiracao +
      (dominio ? '; domain=' + dominio : '') +
      (caminho ? '; path=' + caminho : '') +
      (seguro ? '; secure' : '');
    return true;
  },
  remover: function(chave, caminho, dominio) {
    if (!chave || !this.obter(chave)) return false;
    document.cookie = encodeURIComponent(chave) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT' +
      (dominio ? '; domain=' + dominio : '') +
      (caminho ? '; path=' + caminho : '');
    return true;
  },
  existe: function(chave) {
    return new RegExp('(?:^|;\\s*)' + encodeURIComponent(chave).replace(/[-.+*]/g, '\\$&') + '\\s*=').test(document.cookie);
  }
};

Web Storage

O Web Storage é uma API introduzida no HTML5 que fornece uma maneira mais segura e eficiente de armazenar dados no cliente em comparação com os Cookies. Ele inclui dois objetos: localStorage e sessionStorage, que diferem na persistência dos dados.

localStorage

O localStorage permite armazenar dados persistentes que permanecem disponíveis mesmo após o navegador ser fechado. Os dados são limitados à mesma origem (protocolo, domínio e porta) e podem ser acessados por qualquer página da mesma origem. É uma alternativa superior para dados que precisam sobreviver a sessões, mas deve-se evitar armazenar informações confidenciais.

sessionStorage

O sessionStorage mantém os dados apenas durante a duração da aba ou janela do navegador. Os dados são automaticamente limpos quando a sessão termina, tornando-o adequado para informações temporárias, como o estado de um formulário durante uma etapa de checkout.

Exemplo de Código

Operações básicas com localStorage e sessionStorage, com ligeiras alterações na estrutura.

// Armazenar dados
localStorage.setItem('configuracao_usuario', JSON.stringify({tema: 'escuro', idioma: 'pt'}));
sessionStorage.setItem('estado_sessao', 'ativo');

// Recuperar dados
const config = JSON.parse(localStorage.getItem('configuracao_usuario'));
const estado = sessionStorage.getItem('estado_sessao');

// Remover dados específicos
localStorage.removeItem('configuracao_usuario');
sessionStorage.removeItem('estado_sessao');

// Limpar todos os dados do armazenamento
localStorage.clear();
sessionStorage.clear();

IndexedDB

O IndexedDB é uma API de armazenamento de baixo nível no navegador para grandes quantidades de dados estruturados. Ele suporta transações, índices e consultas eficientes, sendo ideal para aplicações offline ou que lidam com conjuntos de dados complexos. Ao contrário do Web Storage, ele armazena dados no formato de objetos JavaScript.

Exemplo de Código

Um exemplo simplificado de uso do IndexedDB para armazenar e recuperar dados, reescrito com nomes de variáveis e lógica alternativos.

// Inicializar o banco de dados
const inicializarDB = (nomeBD, versao) => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(nomeBD, versao);
    request.onerror = () => reject(request.error);
    request.onsuccess = () => resolve(request.result);
    request.onupgradeneeded = (evento) => {
      const db = evento.target.result;
      if (!db.objectStoreNames.contains('tarefas')) {
        db.createObjectStore('tarefas', { keyPath: 'id', autoIncrement: true });
      }
    };
  });
};

// Salvar um registro
const salvarDado = async (dados) => {
  const db = await inicializarDB('meuApp', 1);
  const transacao = db.transaction('tarefas', 'readwrite');
  const armazem = transacao.objectStore('tarefas');
  return new Promise((resolve, reject) => {
    const request = armazem.put(dados);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
};

// Ler um registro pelo ID
const lerDado = async (id) => {
  const db = await inicializarDB('meuApp', 1);
  const transacao = db.transaction('tarefas', 'readonly');
  const armazem = transacao.objectStore('tarefas');
  return new Promise((resolve, reject) => {
    const request = armazem.get(id);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
};