Como usar localStorage no ReactJS

Existem duas possibilidades principais para o armazenamento de dados no navegador com ReactJS: localStorage e sessionStorage.

O sessionStorage é exatamente igual ao localStorage exeto pelo fato de os dados salvos são apagados cada vez que o navegador for fechado/recarregado.

localStorage

Qualquer conteúdo / dado salvo no objeto localStorage estará disponível depois que o navegador for reiniciado (fechado e aberto novamente).

Métodos do objeto localStorage

Os métodos fornecidos pelo objeto localStorage são os seguintes:

• setItem
• getItem
• removeItem
• clear

Utilizando o localStorage

Para salvar alguma informação no localStorage, você pode usar o método setItem(). Este método deve receber uma chave e um valor.

localStorage.setItem("mykey","myvalue");

Para recuperar alguma informação no localStorage, você precisa usar o método getItem. O método getItem deve receber a chave dos dados que você deseja recuperar:

localStorage.getItem("mykey");

Você pode remover um item do localStorageusando o método removeItem(). Neste método deve ser entregue a chave do item a ser removido:

localStorage.removeItem("mykey");

Para limpar tudo do localStorage, você deve usar o método clear() no objeto localStorage:

localStorage.clear();

Salvando matrizes no localStorage

Além de valores únicos, você também pode salvar uma matriz no localStorage.

Neste exemplo, temos uma matriz com números:

var ourArray =[1,2,3,4,5];

Agora podemos salvá-lo em localStorage usando o setItem()método:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

Para ser salvo, a matriz deve primeiro ser convertida em uma string. No exemplo mostrado acima, estamos usando o método JSON.stringify para fazer isso.

Ao recuperar nossos dados de localStorage, devemos converte-los de volta em uma matriz:

var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);

Exemplo de Componente React

Veja abaixo um exemplo bem prático com React.

Neste exemplo, toda vez que o usuário inserir algum valor no input seu valor será salvo no localStorage.

import React from 'react';
 
const App = () => {
  const [value, setValue] = React.useState('');
 
  const onChange = event => {
    localStorage.setItem('myValueInLocalStorage', event.target.value);
 
    setValue(event.target.value);
  };
 
  return (
    <div>
      <h1>Hello React with Local Storage!</h1>
 
      <input value={value} type="text" onChange={onChange} />
 
      <p>{value}</p>
    </div>
  );
};
 
export default App;

Concluindo

Viu como é fácil salvar dados no navegador com React e localStorage? 😱

Salvar informações no localStorage é muito útil para guardar informações de login de usuários em nossas aplicação, como por exemplo, gravar o token do usuário que será usado ao longo da utilização da aplicação.

Ficou com dúvida? sinta-se a vontade para me contar nos comentários...