Usando localStorage no NextJs
Tags: nextjs, beginners
Published: 2023-03-23 20:48:15

> 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>
```

**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 } });
  }
```

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

```javascript
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));`

![print localstorage chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmea8yssl8ibpei9odw.png)

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

![adicionando itens ao localStorage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hsa6cqmxhno8o9k8pjy.png)


---------------
## 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()`

```javascript
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 👇

```javascript
const [state, dispatch] = useReducer(cartReducer, { cartItems: getStoredCartItems() });
```

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](https://github.com/andpeicunha/jest-mock-svg)