Se você já trabalhou com e-commerce — sabe que a experiência do usuário precisa ser suave, rápida e eficiente. Ninguém quer perder tempo refazendo filtros, adicionando tudo de novo ao carrinho ou se cadastrando a cada nova visita.

Mas e se eu te disser que você pode melhorar isso com algo que todo navegador moderno já oferece? Sim, estou falando dos storages locais.

Neste artigo, vamos ver como usar o localStorage, sessionStorage e IndexedDB na prática, com exemplos de um pet shop online. Bora?

---

🏪 1. localStorage: o pet shop lembra de você

Imagine que o cliente entra no seu e-commerce, escolhe “ração para gato castrado”, muda o tema para escuro, e seleciona frete para São Paulo. Seria bem chato se, ao voltar depois, tudo isso fosse esquecido, né?

É aí que entra o localStorage: uma gaveta do navegador onde você pode guardar pequenas informações entre sessões.

// Tema escuro salvo no navegador
localStorage.setItem("theme", "dark");

// Cidade padrão
localStorage.setItem("userLocation", "São Paulo");

// Filtros de busca
localStorage.setItem("lastSearch", JSON.stringify({ pet: "gato", categoria: "ração" }));

Agora, quando o cliente voltar, você pode carregar isso automaticamente. 💫

💡 Quando usar:

• Tema claro/escuro
• Últimos filtros aplicados
• Produto visualizado recentemente
• Carrinho (se não usar cookies ou backend)

---

🐶 2. sessionStorage: só dura enquanto o doguinho estiver na aba

Digamos que o usuário está finalizando uma compra e preenche dados do endereço. Mas aí ele resolve dar uma olhada rápida no Instagram (quem nunca?) e fecha a aba sem querer.

Se você quiser que, ao reabrir, ele não tenha os dados salvos (por segurança ou consistência), use o sessionStorage. Ele vive só enquanto a aba estiver aberta.

🐾 Exemplo prático:

// Armazenar progresso do checkout
sessionStorage.setItem("checkoutStep", "2");

// Dados temporários do formulário
sessionStorage.setItem("shippingInfo", JSON.stringify({
  rua: "Rua dos Poodles", 
  numero: 42
}));

Ideal para fluxos sensíveis, como checkout ou login, onde manter dados após fechar a aba pode ser arriscado ou desnecessário.

---

🐕 3. IndexedDB: seu banco de dados (offline) no navegador

Se você quiser oferecer uma experiência offline, cache de produtos, ou armazenar uma lista grande (ex: histórico de compras), IndexedDB é o caminho.

É um banco de dados real, embutido no navegador. Assíncrono, poderoso, e ideal para quando localStorage não dá conta.

🐾 Exemplo real: cache de produtos para navegação offline

const request = indexedDB.open("petStoreDB", 1);

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  db.createObjectStore("products", { keyPath: "id" });
};

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("products", "readwrite");
  const store = tx.objectStore("products");

  // Caching os produtos da home
  store.put({ 
    id: 1, 
    nome: "Ração Premium Cat", 
    preco: 89.90 
  });
};

Você pode, por exemplo, guardar os últimos produtos navegados, exibir quando o usuário estiver offline e até oferecer uma busca local.

---

🍪 E os cookies?

Os cookies ainda são úteis, principalmente quando você precisa que os dados viajem até o servidor — como um token JWT para autenticação.

Mas cuidado: o limite é de ~4KB por cookie e eles são enviados a cada request. Prefira cookies apenas para o essencial.

---

🔐 Sobre segurança (sério agora)

Nunca, nunca armazene:

• Senhas
• Tokens de acesso
• Dados pessoais sensíveis

Esses storages podem ser acessados via JavaScript e, portanto, vulneráveis a ataques XSS. Se precisar armazenar algo sensível, use cookies seguros com HttpOnly e Secure, e sempre sanitização no frontend/backend.

---

🧠 Qual usar no seu e-commerce pet?

O que guardar	Onde guardar
Tema, filtros, cidade, preferências	localStorage
Progresso do checkout	sessionStorage
Histórico de navegação, cache	IndexedDB
Token de sessão (com segurança)	cookie (HttpOnly)

---

🎁 Dica bônus: use bibliotecas que ajudam

Gerenciar tudo isso na mão pode virar um caos. Existem libs que tornam a experiência mais suave:

• localForage – IndexedDB + localStorage, com API simples
• Dexie.js – IndexedDB com cara de banco relacional
• idb – wrapper leve, com promises

---

✨ Conclusão

Seja um e-commerce ou uma plataforma de e-learning, saber usar os storages certos faz diferença real na experiência do usuário. Você melhora performance, personalização e até reduz hits no backend.

E o melhor: tudo isso está ao alcance do navegador, sem instalar nada.

Então, da próxima vez que um cliente visitar sua loja e encontrar tudo do jeito que deixou, lembre-se: talvez ele nem saiba, mas foi o localStorage que fez o trabalho sujo 🧼