Introdução
Ao desenvolver aplicativos leves – podemos querer armazenar alguns dados. Se um banco de dados é um exagero - há uma ótima alternativa: localStorage!
Embora não substitua um banco de dados para fins de banco de dados, ele serve como um sistema de armazenamento baseado em arquivo simples que você pode aproveitar para armazenar pontos de dados facilmente acessíveis.
Neste artigo, vamos aprender a usar
localStoragepara armazenar dados facilmente em nosso navegador. Esses dados são salvos como pares de valor-chave que o usuário pode facilmente recuperar.
Salvando dados para localStorage no React é super fácil:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Se você não tem pressa e quer saber mais sobre como isso funciona, continue lendo!
O que é a armazenamento local?
localStorage é um objeto de armazenamento na Web que permite aos desenvolvedores armazenar pares de valor-chave em um navegador da Web e garante que esses dados sobrevivam a todas as atualizações de página, mesmo quando um usuário fecha ou reinicia um navegador - e não tem data de validade. Os pares de valores-chave armazenados podem incluir qualquer tipo de dados – arrays, objetos, strings, números e muitos outros.
No entanto, isso não pode substituir a função dos bancos de dados em seus sites e aplicativos da Web porque os dados são perdidos quando um usuário limpa o cache do navegador e o armazenamento local. armazenamento local e deve ser usado como tal. No entanto, existem situações em que um usuário pode usar localStorage, como a implementação do modo escuro recurso, persistindo o valor de entrada do formulário de um usuário e muitos outros.
localStorage tem métodos embutidos que nos permitem acessar o objeto de armazenamento do navegador. Um exemplo é o setItem() método, que nos permite adicionar uma chave e um valor para localStorage, permitindo-nos armazenar dados. Outros métodos são usados para recuperar dados – getItem(), excluir dados – removeItem(), limpar tudo localStorage instâncias – clear(), E assim por diante.
Armazenando dados para armazenamento local Com o setItem() Forma
A setItem() método nos permite salvar valores de qualquer tipo de dados para localStorage atribuindo valores a chaves, resultando em um par de valor-chave. Esta chave seria usada para recuperar o valor correspondente sempre que quisermos recuperá-lo de localStorage.
Observação: Para armazenar dados em localStorage, devemos primeiro convertê-lo para Cadeia JSON usando o JSON.stringify() função. E quando quisermos recuperá-lo, analisaremos os dados usando JSON.parse(), convertendo a string JSON de volta para um Objeto JSON.
Ao trabalhar com dados no React, frequentemente usamos ganchos para nos ajudar a armazená-lo/manter. Hooks também podem nos ajudar a encontrar onde fazer upload desses dados. Isso também se aplica a localStorage porque vamos usar o useState() e useEffect() ganchos. Esses ganchos são críticos porque o useState() hook é usado para armazenar e definir dados, enquanto o useEffect() hook é acionado por padrão após a primeira renderização e sempre que o estado passado como o segundo parâmetro muda.
Depois de explicar a base, aqui está o código que usaríamos para armazenar dados em localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Primeiro criamos um estado para armazenar os dados que queremos armazenar em nosso localStorage, e então criamos um useEffect() hook, passando o estado como o segundo parâmetro. Dessa forma, sempre que o estado muda, os dados no localStorage é atualizado para o valor atual.
Lidamos com a funcionalidade principal, que é usada para nos ajudar no armazenamento de dados, dentro do useEffect() gancho:
localStorage.setItem('dataKey', JSON.stringify(data));
Conclusão
Neste artigo, aprendemos como usar hooks do React para armazenar dados no React usando localStorage. Como dito anteriormente, isso nunca substituirá a função de um banco de dados, mas nos ajudará a armazenar alguns dados relacionados ao usuário que podem melhorar a interface do usuário, mas não devem ser persistidos independentemente do navegador.
