Executando verificação de segurança...
4
rafaelsreis
2 min de leitura ·

Persistência de login com LocalStorage

O que é o LocalStorage ?

O LocalStorage é um recurso do JavaScript que permite armazenar dados localmente no navegador do usuário. Ele utiliza pares de chave-valor para armazenar informações que podem ser acessadas e utilizadas posteriormente pela aplicação web.

Quando construímos um site e prezamos pela experiência do usuário, o ideal é que o usuário possa persistir o seu login evitando assim que ele fique repetindo as informações de login sempre que quiser acessar o nosso site. Para fazer essa persistência, vamos usar uma ferramenta chamada LocalStorage, ela é como se fosse um "banco de dados" do nosso navegador.

Salvando dados no LocalStorage utilizando o JavaScript!

Para salvar um dado de forma persistente para uma variável qualquer, basta seguir estes passos dentro do seu arquivo:

Método setItem (Recomendado):

localStorage.setItem("idade", 25)

Verificando dados do LocalStorage utilizando o JavaScript!

Para recuperar os dados salvos vamos ultilizar o método getItem

localStorage.getItem("idade");

Fluxo de uma aplicação

imagem de fluxo de login

1 - O usuário interage com a aplicação e fornece informações.

2 - A aplicação coleta e processa essas informações.

3 - A aplicação utiliza o método setItem() do localStorage para armazenar essas informações no navegador do usuário.

4 - As informações são armazenadas no navegador do usuário e ficam disponíveis mesmo após o usuário fechar o navegador ou reiniciar o computador.

5 - Quando a aplicação precisa acessar essas informações novamente, ela utiliza o método getItem() do localStorage para recuperar os dados armazenados.

6 - A aplicação utiliza esses dados para exibir informações relevantes para o usuário ou realizar outras tarefas.

Carregando publicação patrocinada...
7
filipedeschamps

Uma sugestão que eu dou é não colocar tokens de sessão dentro do LocalStorage e, ao invés disto, colocar como um Cookie que tenha a flag HttpOnly, pois assim nenhum script do lado do client-side vai conseguir ler este valor e estará protegido de ser lido indevidamente por um ataque XSS.

Um exemplo de como é feito aqui no próprio TabNews:

https://github.com/filipedeschamps/tabnews.com.br/blob/586eefd30b1f979c9f77c7a5ffc163687454bee7/models/session.js#L23

2
rafaelsreis
Autor
Autor

Desconhecia essa forma mais segura de armazenar dados sensíveis de uma aplicação, já dei uma breve lida no assunto e olhei o repositório que você sugeriu, irei me aprofundar nesse assunto e com certeza aplicar nos meus próximos projetos pessoais.

Muito obrigado pela dica!!

2
1
1
antonioloureiro

tentei este codigo ->

Salvar Dados Salvar 
<script type="text/javascript">
    document.getElementById('salvar').onclick = function(){
        let text = document.getElementById('texto').value;
        localStorage.setItem('texto', text);
    }
</script>
1
AbnerSilvaBarbosa

As vezes a gente criptografa as informações do localStorage e apenas o nosso servidor tem a chave para ver os valores, garantindo ainda mais segurança para o usuário e para a nossa aplicação.

1
1
AbnerSilvaBarbosa

isso vária muito, mais eu acredito que um dos possiveis fluxo sejá, o usuario pede a requisição de login e recebe os dados criptografados no localstorage mais quando ele precisar enviar algumas dessas informações para o back-end o front se encarrega de enviar a chave, onde só ele é possivel gerar, algo parecido com isso, sinceramente eu tenho que dar uma pesquisada mais afundo :L