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 no React
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…
LEIA TAMBÉM: