localStorage é um dos dois mecanismos de armazenamento da web do navegador. Ele permite que os usuários salvem dados como pares de chave/valor no navegador para uso posterior.
Ao contrário do mecanismo sessionStorage, que persiste os dados no armazenamento do navegador enquanto a guia atual do navegador estiver em execução, localStorage não limpar os dados quando o navegador fechar.
Isso o torna ideal para dados persistentes não vinculados à guia do navegador atual.
Os desenvolvedores geralmente implementam localStorage ao adicionar um recurso de modo escuro a um aplicativo, persistir um item de tarefa ou valores de entrada de formulário de um usuário, entre muitos outros casos de uso.
Neste guia, abordamos como usar localStorage para persistir a entrada de formulário de um usuário no armazenamento do navegador usando React Ganchos. Também abordaremos como criar um React Hook personalizado para compartilhar lógica semelhante entre vários componentes.
localStorage com os pré-requisitos do React Hooks
Para seguir este guia, certifique-se de ter um compreensão do React e React Hooks . Além disso, certifique-se de ter Node.js instalado em seu computador.
Configuração inicial do projeto localStorage
Funcionando com um novo aplicativo React, vamos ao terminal do computador e executar o seguinte comando para criar um novo projeto React:
npx create-react-app localstorage-react-hook
Depois que a pasta do projeto for gerada, abra com um editor de código e inicie o servidor de desenvolvimento executando o comando npm start.
O projeto deve ser iniciado no navegador em http://localhost: 3000/.
Criando um componente de formulário React
Conforme mencionado anteriormente, usaremos o localStorage para persistir a entrada de um formulário do usuário no armazenamento do navegador.
Como todo aplicativo React, nosso foco está na pasta src. Portanto, vamos excluir todos os arquivos dentro do src e criar um arquivo index.js dentro do src para evitar uma quebra de front-end.
Em seguida, adicione o seguinte código ao index.js:
import React from”reagir”; importar ReactDOM de”react-dom”; importar App de”./components/App”;//importação de estilos”./app.css”; ReactDOM.render (
Observe que importamos um arquivo CSS para adicionar estilo ao aplicativo. Então, vamos criar uma pasta app.css na pasta src.
Copie os estilos do localstorage-react-hook-project e adicione-os ao arquivo app.css.
Em seguida, crie uma pasta de componentes na pasta src para armazenar os arquivos do componente. Em seguida, adicione um arquivo App.js e um arquivo Form1.js. O arquivo App.js é a raiz e o componente pai, enquanto o Form1.js manterá as entradas do formulário.
Adicione o seguinte código no arquivo components/App.js:
import Form1 from”./Formulário 1″; const App=()=> {return (
localStorage com ganchos React
); }; exportar aplicativo padrão;
E finalmente, adicione este código ao arquivo components/Form1.js:
import {useState} from”react”; const Form1=()=> {const [nome, setName]=useState (“”); return (
); }; exportar Form1 padrão;
Depois de salvar os arquivos, teste o projeto e você deverá ver esta renderização:
O código acima é a implementação mais simples das entradas de formulário no React. Usando o gancho useState React para controlar o componente, mantemos o estado de entrada atualizado em cada pressionamento de tecla, como visto acima.
Mas, uma vez que acionamos uma atualização de página, os dados de entrada são limpos, o que é esperado.
Para manter os dados de entrada para que fiquem disponíveis em um recarregamento de página ou em revisitas subsequentes, devemos salvar os dados no localStorage.
Salvar os dados de entrada do formulário em localStorage
localStorage nos dá acesso ao armazenamento de um navegador objeto . O objeto Storage possui métodos disponíveis para salvar, ler e remover dados, entre muitas outras ações.
Para ver uma lista dos métodos de armazenamento, abra o console do navegador e digite localStorage. Após pressionar Enter, os métodos se tornam disponíveis no protótipo do objeto Storage.
Usando o método setItem ()
Para armazenar os dados de entrada do formulário no armazenamento do navegador, devemos invocar o setItem () método de armazenamento usando a seguinte sintaxe:
localStorage.setItem (“key”,”value”)
O armazenamento do navegador só aceita strings de tipo de dados. Portanto, para valores de diferentes tipos de dados, como objeto ou array, devemos convertê-lo em uma string JSON usando JSON.stringify ().
Usando o gancho useEffect para realizar efeitos colaterais
Também podemos usar o useEffect React Hook para executar efeitos colaterais , como armazenar dados no armazenamento do navegador. Isso torna este Hook um lugar perfeito para chamar o método setItem.
Abra o arquivo components/Form1.js e adicione o seguinte código acima da instrução de retorno:
useEffect (()=> {//armazenando o nome de entrada localStorage.setItem (“nome”, JSON.stringify (nome));}, [nome]);
Certifique-se de mportar o useEffect do React assim:
importar {useState, useEffect} de”react”;
Aqui, atribuímos uma chave,”nome”e um valor dinâmico da variável de estado, que é nome.
O valor inicial da variável de estado de nome é padronizado para uma string vazia:
const [name, setName]=useState (“”);
Usar JSON.stringify no setItem é opcional ao salvar dados da string no armazenamento:
localStorage.setItem (“name”, JSON.stringify (name));
No entanto, JSON.stringify é necessário se o valor for um tipo de dados diferente, como um objeto ou array.
Agora, salve o arquivo e teste o projeto; devemos ver a seguinte renderização:
Em cada pressionamento de tecla, o valor de entrada é salvo no armazenamento local porque o gancho useEffect que mantém o método de armazenamento setItem é executado na primeira renderização do componente e após cada mudança de estado.
No entanto, em uma recarga de página, o valor no armazenamento retorna para uma string vazia. Isso está acontecendo porque atribuímos uma string vazia padrão à variável de estado, nome. Portanto, o React usa o valor vazio na renderização inicial.
Agora, em vez de atribuir uma string vazia, devemos obter o valor do estado atualizado em cada ponto do armazenamento e atribuí-lo como o valor do estado padrão.
Lendo dados do armazenamento local
Em um carregamento de página inicial, em vez de atribuir uma string vazia à variável de estado do nome, devemos atribuir uma função que acessa o armazenamento local, recuperar o valor salvo e use esse valor como o padrão.
Usando o método getItem ()
Atualize o gancho useState no arquivo components/Form1.js:
const [ name, setName]=useState (()=> {//obtendo valor armazenado const saved=localStorage.getItem (“name”); const initialValue=JSON.parse (saved); return initialValue ||””;});
Aqui, usamos o método de armazenamento getItem () para recuperar dados do armazenamento local. O JSON.parse () usado no código desserializa a string JSON retornada do armazenamento.
Ambos JSON.Stringify e JSON.parse são opcionais ao trabalhar com valores de string (como visto em nosso caso). No entanto, outros tipos de dados, como objetos e matrizes, exigem-nos.
Salve o arquivo e teste o projeto. Os dados de entrada devem estar disponíveis no campo do formulário em um recarregamento de página ou em uma visita posterior à página.
Criando um React Hook personalizado para persistir as entradas do formulário
Às vezes, podemos queremos renderizar e persistir mais entradas de formulário, como uma entrada de texto e uma entrada de caixa de seleção, em um componente diferente.
Embora possamos copiar facilmente a lógica daquele que já criamos e usá-la em o novo componente, nem sempre é praticável, especialmente se decidirmos criar mais dessas entradas.
Em vez disso, o React nos permite extrair e compartilham lógica semelhante entre componentes usando Ganchos personalizados .
Nesta seção, aprenderemos como criar um Gancho personalizado para persista as entradas do formulário em vários componentes.
Vamos começar criando outro formulário. Na pasta src/components, crie um novo arquivo chamado Form2.js e adicione o seguinte código:
import {useState} from”react”; const Form2=()=> {const [nome, setName]=useState (“”); const [verificado, setChecked]=useState (false); return (
); }; exportar Form2 padrão;
Em seguida, importe e use o componente no arquivo components/App.js:
//… import Form2 from”./Form2″; const App=()=> {return (
); }; exportar aplicativo padrão;
Salve os arquivos e visualize o formulário no frontend.
Interagir com este formulário não persiste o valor do estado em localStorage, pois ainda não temos a lógica.
Então, vamos definir uma única lógica para gerenciar todas as nossas entradas de formulário.
Extraindo a lógica localStorage
Para começar a extrair a lógica localStorage, crie um arquivo chamado useLocalStorage.js no pasta src e adicione o seguinte código:
import {useState, useEffect} from”react”; function getStorageValue (key, defaultValue) {//obtendo valor armazenado const saved=localStorage.getItem (key); const inicial=JSON.parse (salvo); inicial de retorno || valor padrão; } export const useLocalStorage=(key, defaultValue)=> {const [value, setValue]=useState (()=> {return getStorageValue (key, defaultValue);}); useEffect (()=> {//armazenando o nome de entrada localStorage.setItem (key, JSON.stringify (value));}, [chave, valor]); return [valor, setValue]; };
Olhando mais de perto o código acima, extraímos apenas a lógica de armazenamento do arquivo components/Form1.js. Não fizemos nada de especial.
Ao criar um Gancho personalizado chamado useLocalStorage, mantemos toda a lógica de armazenamento que temos no componente Form1.
O Gancho useLocalStorage espera dois argumentos: a chave e o defaultValue. Isso significa que esperamos passar esses valores ao chamar o Gancho em nossos diferentes componentes.
Observe que você pode nomear seu Gancho personalizado de qualquer maneira, mas certifique-se de começar com o uso.
Usando o useLocalStorage custom Hook
No arquivo components/Form1.js, substitua a lógica acima da instrução return pelo Hook customizado para que você tenha o seguinte:
import {useLocalStorage} from”../useLocalStorage”; const Form1=()=> {const [nome, setName]=useLocalStorage (“nome”,””); return (
); }; exportar Form1 padrão;
Depois de importar o Gancho personalizado, podemos usá-lo e passar adiante a chave única e o valor padrão, que, neste caso, é uma string vazia.
Se fizermos o mesmo para o Form2 componente no arquivo components/Form2js, devemos ter o seguinte:
import {useLocalStorage} from”../useLocalStorage”; const Form2=()=> {const [name, setName]=useLocalStorage (“name2″,””); const [verificado, setChecked]=useLocalStorage (“verificado”, falso); return (
); }; exportar Form2 padrão;
Salve todos os arquivos e teste o projeto. Devemos ser capazes de persistir todas as entradas de formulário em localStorage.
Bom trabalho!
Problemas para acessar localStorage para um aplicativo renderizado do lado do servidor
Ao trabalhar com uma estrutura como Next.js que executa código no lado do servidor, o uso de localStorage obtém um erro informando: “a janela não está definida.”
O localStorage, conforme usado em nosso código, é um-in propriedade do objeto window, window.localStorage.
Em nosso código, ignoramos a janela ao acessar o localStorage porque é um objeto global; podemos escolher incluir o objeto de janela porque é opcional.
Agora, este objeto de janela não está disponível no lado do servidor, mas sim no lado do cliente/navegador, que mostra o erro.
Para corrigir o erro no lado do servidor, verifique se o objeto janela está definido ou não. Dessa forma, nosso código só roda no ambiente onde a janela está disponível.
Abra o arquivo src/useLocalStorage.js e atualize a função getStorageValue () para que você tenha o seguinte:
function getStorageValue (key, defaultValue) {//obtendo valor armazenado if (typeof window!==”undefined”) {const saved=localStorage.getItem (key); const inicial=salvo!==nulo? JSON.parse (salvo): defaultValue; retorno inicial; }}
Não se esqueça de que também usamos o localStorage dentro do gancho useEffect no arquivo useLocalStorage.js.
Mas, neste caso, o localStorage é seguro porque o gancho useEffect só é executado no lado do cliente, onde temos acesso ao objeto janela.
Teste o projeto para garantir que tudo ainda funcione conforme o esperado.
Conclusão
Nós abordou como usar o localStorage para persistir dados em um navegador usando os Ganchos React. Também aprendemos como criar um Gancho personalizado para extrair a lógica do componente em funções reutilizáveis.
Se você gostou deste guia, compartilhe-o na web. E, se você tiver dúvidas ou contribuições, compartilhe-as na seção de comentários.
Encontre o todo o código-fonte do projeto aqui .
