DEV Community

Cover image for Front-end além de pintar botão!
Sther
Sther

Posted on

Front-end além de pintar botão!

Oi, pessoal! Eu sou a Sther, e esse é um blogpost sobre meu aprendizado em usar cache no front-end.

SIM, CACHE NO FRONTEND! Achou que front-end era só pintar botão ou pensar em componente mobile first?

Bom… tambémmm é. XD

Porém temos umas coisas bem legais que podemos aproveitar nele, e uma delas é o ✨cache✨.

Você sabia que ele não vive só no back-end? Então, bora ver como funciona!

Por que usar cache no front-end?

Às vezes, a gente tem aquele dado que não muda com frequência, e queremos evitar requisições desnecessárias toda vez que a página for atualizada.
Aí entra o cache no front, que pode salvar nossa performance e até melhorar a experiência do usuário.


Aqui são algumas formas de fazer cache no front:

🟡 SessionStorage

Guarda os dados enquanto a aba está aberta. É ótimo para dados temporários que não precisam sobreviver a um refresh completo.

Mas, como você acessa isso?

Segue aqui um exemplo:

sessionStorage.setItem('nome', 'Sther');
const nome = sessionStorage.getItem('nome'); // 'Sther'
Enter fullscreen mode Exit fullscreen mode

Quando posso usar isso?

Em um formulário de múltiplas etapas. O usuário pode navegar entre os passos sem perder o progresso, mas se fechar a aba… já era!


🟢 LocalStorage

O meu preferido! Ele persiste os dados mesmo após fechar o navegador. Ideal para lembrar preferências do usuário, temas, login, etc.

Mas como posso acessar isso?

Segue um exemplo, ele é muito parecido com o SessionStorage quando vamos fazer a chamada:

localStorage.setItem('tema', 'dark');
const tema = localStorage.getItem('tema'); // 'dark'
Enter fullscreen mode Exit fullscreen mode

Exemplo real:

A Shopify utiliza isso no processo de checkout (veja aqui). Quando você adiciona um produto ao carrinho, os dados são salvos no LocalStorage, se você recarregar a página, o carrinho continua lá! Isso dá uma sensação de continuidade super fluida.

Outros exemplos de uso que são conhecidos:

  • Lembrar o tema claro/escuro da aplicação
  • Salvar o token de autenticação (embora não seja recomendado)
  • Lembrar filtros ou preferências em uma listagem de produtos

🔵 IndexedDB

É um banco de dados completo no navegador. Suporta dados estruturados e de grande volume, diferente dos dois acima que são key-value simples. É mais complexo de usar porém muito poderoso!

Como posso acessar?

O acesso ao IndexedDB é assíncrono e um pouco mais verboso:

const request = indexedDB.open('meuBanco', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  // Aqui você pode começar a ler e escrever dados
};

request.onerror = (event) => {
  console.error('Erro ao abrir o banco', event);
};
Enter fullscreen mode Exit fullscreen mode

Exemplo real:

O Google Docs usa IndexedDB para salvar seus documentos offline. Mesmo se você perder a conexão, ele continua funcionando e depois sincroniza com o servidor e também PWAs que precisam funcionar sem conexão!


Olha quanta coisa bacana dá pra fazer além de pintar alguns botões, hahaha

É ÓBVIO que o back-end tem seu papel essencial, mas pensando em performance, experiência do usuário e praticidade, vale a pena explorar o que temos disponível no navegador.

É isso, pessoal, obrigada por terem lido até aqui!

Câmbio e desligo!

Top comments (4)

Collapse
 
kremilly profile image
Kremilly

Muito booooooooom, eu nunca usei o IndexDB, mas, agora to pensando em usar ele em algum projeto, só para testar mesmo.

Collapse
 
guim0 profile image
Guimo

Bom demais, compartilhei na pilula de conhecimento da empresa.

Collapse
 
programador_who profile image
Programador Who

Parabéns :)
Seguir e vou ter como base para criar um futuramente. :)

Collapse
 
patrickmonteiro profile image
Patrick Monteiro

O indexdb fez parte tbm dos meus estudos e consegui fazer algo bem interessante com ele e PWA. Um app de estoque simples, que consegue salvar tudo no indexdb e caso a pessoa troque de aparelho ela consegue exportar os dados para levar pro novo aparelho tbm.

Segue o app online:
e-estoque.com.br/