Como usar localStorage no ReactJS

React Dez 15, 2020

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

Josias Pereira

Sou Bacharel em Sistemas de Informação. No meu tempo livre, gosto de escrever sobre tecnologias, linguagens de programação, ferramentas e minhas experiências sobre o desenvolvimento web.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.