O melhor lugar para você aprender Javascript.

Descubra como é simples dominar o desenvolvimento Full Stack.

Salvando informações com o Session e o Local Storage no React Js.

Salvando informações com o Session e o Local Storage no React Js.

O Local Storage e o Session Storage são espaços reservados pelos navegadores para o salvamento de informações.

Essas são alternativas interessantes para quando você precisa que as informações permaneçam salvas mesmo após o usuário recarregar a página.

A principal diferença entre o Local Storage e o Session Storage é que o Local Storage salva as informações de forma permanente, até que a aplicação as remova ou o usuário limpe os dados do seu navegador.

O Session Storage salva os dados apenas enquanto a sessão do usuário estiver ativa, ou seja, enquanto a página da sua aplicação estiver aberta.

Caso você abra sua página em uma nova janela, uma nova sessão será criada e os dados antigos não serão acessíveis.

Como utilizar

Tanto o Local Storage, como o Session Storage, possuem 3 funções principais, são elas:

setItem(‘@nome-do-app/chave’, value): Responsável por guardar um novo valor, nessa função você deve passar 2 valores, o nome do seu item e valor que será guardado.

Como qualquer aplicação pode salvar informações no Local Storage, para não ter seus dados sobrescritos, é uma boa prática salvar seus dados com um nome único. Geralmente é utilizada a seguinte sintaxe: @nome-do-app/chave

getItem(‘@nome-do-app/chave’): Responsável por recuperar um dado que foi salvo no localStorage, nessa função você precisa passar a chave do item que você está querendo recuperar. Caso não exista um valor salvo, será retornado null.

removeItem(‘@nome-do-app/chave’): Responsável por remover um dado que foi salvo no localStorage, nessa função, assim como na de cima, você precisa passar a chave do item que você está querendo remover.

Todas as funções acima valem tanto para o Local Storage, como para o Session Storage. Você pode utiliza-los da seguinte maneira:

// Local Storage
localStorage.setItem('@nome-do-app/chave', valor);
localStorage.getItem('@nome-do-app/chave');
localStorage.removeItem('@nome-do-app/chave');
// Session Storage
sessionStorage.setItem('@nome-do-app/chave', valor);
sessionStorage.getItem('@nome-do-app/chave');
sessionStorage.removeItem('@nome-do-app/chave');

Para estes exemplos, foi utilizado o Local Storage, para utilizar o Session Storage, basta trocar localStorage por sessionStorage.

Cuidado! O Local Storage e o Session Storage são locais onde todas as aplicações/sites têm acesso, então uma aplicação mal-intencionada pode facilmente ter acesso aos seus dados, por isso, você não deve salvar informações sensíveis.

Aplicação prática

Para vermos tudo isso em prática, criaremos um projeto de boas vindas aos usuários logados.

Para isso, seguiremos alguns passos importantes para a construção da nossa aplicação

Passo #1: Criação do projeto

Para começamos, criaremos um projeto através do Create React App.

Você pode criar seu projeto através do comando abaixo:

create-react-app welcome

Com o processo finalizado, você pode entrar na pasta app que você criou e rodar o comando:

yarn start

Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante a essa:

Tela padrão de projetos criados através do CRA.

Passo #2: Instalação das bibliotecas

Agora, instalaremos as bibliotecas que usaremos no nosso projeto.

Para isso, dentro da pasta do seu projeto, rode o comando abaixo:

yarn add styled-components

O styled-components é a biblioteca que vai nos ajudar a estilizar nossa aplicação.


Passo #3: Configurações gerais

Em todos os projetos que eu crio utilizando Create React App, eu sempre gosto de fazer algumas configurações para deixar o projeto mais organizado.

Começaremos apagando alguns arquivos na pasta src, são eles:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • serviceWorker.js

Apague também o arquivo manifest.json, que está na pasta public.

Precisamos também remover a importação desses arquivos.

O seu index.js deve ficar da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

E o seu arquivo App.js, deve ficar da seguinte forma:

import React from 'react';

function App() {
  return <div />;
}

export default App;

Para finalizar a parte de configuração, criaremos um arquivo de estilos globais para nossa aplicação.

Para isso, crie uma pasta chamada styles, dentro da pasta src, e nela, crie um arquivo index.js.

Adicione a esse arquivo o seguinte código:

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  html,
  body {
    height: 100%;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #009587;
      
    text-rendering: optimizeLegibility !important;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
  }
`;

Essas configurações nos ajudarão a trabalhar melhor com tamanhos nos nossos componentes.

Nesse momento, sua estrutura deve estar semelhante a essa:

Estrutura de pastas após as configurações iniciais do projeto.

Passo #4: Criação da página

Após terminar as configurações iniciais, criaremos uma página de boas vindas, para podermos ver o Local Storage em funcionamento.

Para isso, dentro da pasta src, criaremos uma pasta chamada pages.

Dentro da pasta pages criaremos uma pasta Welcome e nela, criaremos dois arquivos, um arquivo index.js e um styles.js

Adicione o seguinte conteúdo ao index.js:

import React from 'react';

import {
  Container, LoginForm, UsernameInput, SubmitButton,
} from './styles';

function Welcome() {
  const username = localStorage.getItem('@welcome-app/username');

  function handleSubmit(event) {
    event.preventDefault();

    const newUsername = event.target.elements.username.value;
    localStorage.setItem('@welcome-app/username', newUsername);

    window.location.reload();
  }

  function handleLogout() {
    localStorage.removeItem('@welcome-app/username');

    window.location.reload();
  }

  if (username !== null) {
    return (
      <Container>
        <p>{`Bem vindo ${username}`}</p>
        <SubmitButton onClick={handleLogout}>Sair</SubmitButton>
      </Container>
    );
  }
  return (
    <LoginForm onSubmit={handleSubmit}>
      <UsernameInput type="text" name="username" placeholder="Nome de usuário" required />
      <SubmitButton type="submit">Entrar</SubmitButton>
    </LoginForm>
  );
}

export default Welcome;

A função handleSubmit é responsável por pegar o username digitado e salvar essa informação no Local Storage com a palavra-chave @welcome-app/username, através da função setItem.

A função handleLogout exclui esse token, através da função removeItem.

Nesse componente, nós fazemos um simples verificação para sabermos se o usuário está logado ou não.

Agora, criaremos os estilos que utilizamos nessa página.

Para isso, no arquivo styles.js que criamos, adicione o seguinte código:

import styled from 'styled-components';

export const Container = styled.div`
  display: flex;
  text-align: center;
  flex-direction: column;
  min-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 30px 20px;
`;

export const LoginForm = styled.form`
  display: flex;
  text-align: center;
  flex-direction: column;
  min-width: 280px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 30px 20px;
`;

export const SubmitButton = styled.button`
  height: 40px;
  text-align: center;
  align-items: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  border: 0;
  color: #fff;
  background-color: #009587;
  margin-top: 5px;
  cursor: pointer;
`;

export const UsernameInput = styled.input`
  height: 40px;
  padding: 0 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  color: #444;
  font-size: 16px;

  ::placeholder {
    color: #666;
    font-size: 16px;
  }
`;

Passo #5: Finalizando a aplicação

Agora, precisamos importar todas as modificações que fizemos até agora.

Para isso, deixe seu App.js da seguinte maneira:

import React from 'react';

import GlobalStyles from './styles';

import Welcome from './pages/Welcome';

function App() {
  return (
    <>
      <GlobalStyles />
      <Welcome />
    </>
  );
}

export default App;

Nesse arquivo, nós importamos GlobalStyles que criamos no Passo #3 e a página Welcome que acabamos de criar.

Com a aplicação concluída, sua estrutura de pastas deve estar mais ou menos assim:

Demonstração

Ver código no github ↗

Forte Abraço,

Carlos Levir

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

Sobre o Autor

Carlos Levir
Carlos Levir

Desenvolvedor fascinado por aprendizado e pelo ecossistema Javascript. Sempre em busca do próximo nível. Atualmente atua como Engenheiro de Software na Rocketseat.

0 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *