DEV Community

Cover image for Usando localStorage no NextJs
André Peixoto
André Peixoto

Posted on

Usando localStorage no NextJs

#nextjs #beginners

Em alguns momento o localStorage pode ser uma saída bem interessante, mas você sabe o que é e pra que serve? Sabe como usar no NextJs sem ter erros no servidor?

O que é o localStorage?

Se já sabe o que é o localStorage pode pular esse primeiro tópico
O localStorage é uma API do navegador que permite armazenar dados localmente no navegador/computador do usuário.

Esses dados são armazenados permanentemente e podem ser acessados e modificados, permitindo acessar e recuperar mesmo após o usuário fechar o navegador ou até mesmo reiniciar o computador. Essa é uma explicação bem breve, mais detalhes o tio Google ou GPT explicam.

Como Gravar

O código completo desse exemplo você pode acessar pelo GitHub, mas por favor leia com atenção, no final deixei o link ✌

Nesse exemplo, eu gravo os dados de um state no localStorage quando o usuário clica num botão, segue abaixo a sequencia.

1- Passo as variáveis pra função handle

 javascript <button onClick={() => handleAddToCart(prod.id, prod.name, prod.valor)}> //aqui eu chama a função e passo as variáveis do array <Image src={addBt} width="24" height="24"/> </button>
Enter fullscreen mode Exit fullscreen mode

2- Na função handle, eu chamo o hook useReducer e atualizo o state 👇

 javascript function handleAddToCart(itemId: any, itemName: any, itemValue: any) { dispatch({ type: "ADD_TO_CART", payload: { id: itemId, name: itemName } }); }
Enter fullscreen mode Exit fullscreen mode

3- Nesse useEffect eu monitoro o state e sempre que tem uma alteração nos valores, ele grava os dados no localStorage.

 useEffect(() => { if (state.cartItens !== null) { localStorage.setItem("cartItems", JSON.stringify(state.cartItems)); } }, [state]);
Enter fullscreen mode Exit fullscreen mode

Aqui nesse print, pelo DevTools do Chrome, é possível ver no navegador como os dados são salvos.

Repare que ele cria um cara chamado cartItems, que foi o nome que eu defini. Ele pega o valor do state.cartItems e salva numa variável cartItems dentro do localStorage.

localStorage.setItem("cartItems",JSON.stringify(state.cartItems));

print localstorage chrome

Conforme eu vou adicionando itens ao meu carrinho, ele adiciona esses itens no localStorage também.

adicionando itens ao localStorage

Como Ler

Até aqui talvez não tenha nenhuma novidade, mas no Next, o detalhe está na hora da leitura.

Como o NextJs roda no servidor, mas os dados do localStorage estão no client, é preciso criar uma verificação, e fiz isso nessa função getStoredCartItems()

 function getStoredCartItems() { if (typeof window !== "undefined") { const storedCartItems = localStorage.getItem("cartItems"); if (storedCartItems !== null) { try { const cartItems = JSON.parse(storedCartItems); return cartItems; } catch (error) { console.error(error); } } } return []; }
Enter fullscreen mode Exit fullscreen mode

E o segredo está todo aqui no if... aqui ele valida se está rodando no client evitando erros, pois no server não existem essas os dados do window.
if (typeof window !== "undefined")

E na variável do useReducer ele começa chamando essa função 👇

 const [state, dispatch] = useReducer(cartReducer, { cartItems: getStoredCartItems() });
Enter fullscreen mode Exit fullscreen mode

Dessa forma, temos os seguintes passos:

  1. Verifica se está rodando no client
  2. Verifica se existem dados gravados no localStorage
  3. Se houver, carrega esses dados no state.

O código completo desse projeto está no link abaixo, especificamente em Components/Lista.tsx 👉 GitHub/andpeicunha

Top comments (0)