This content originally appeared on DEV Community and was authored by André Peixoto
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
<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>
2- Na função handle, eu chamo o hook useReducer e atualizo o state 👇
function handleAddToCart(itemId: any, itemName: any, itemValue: any) {
dispatch({ type: "ADD_TO_CART", payload: { id: itemId, name: itemName } });
}
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]);
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));
Conforme eu vou adicionando itens ao meu carrinho, ele adiciona esses itens no localStorage também.
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 [];
}
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() });
Dessa forma, temos os seguintes passos:
- Verifica se está rodando no client
- Verifica se existem dados gravados no localStorage
- Se houver, carrega esses dados no state.
O código completo desse projeto está no link abaixo, especificamente em Components/Lista.tsx 👉 GitHub/andpeicunha
This content originally appeared on DEV Community and was authored by André Peixoto
André Peixoto | Sciencx (2023-03-23T20:48:15+00:00) Usando localStorage no NextJs. Retrieved from https://www.scien.cx/2023/03/23/usando-localstorage-no-nextjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.