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
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.
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:
muito obrigado pelas dicas 🤩
tentei este codigo ->
<script type="text/javascript">
document.getElementById('salvar').onclick = function(){
let text = document.getElementById('texto').value;
localStorage.setItem('texto', text);
}
</script>
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.