Last active
April 5, 2020 23:40
-
-
Save vrufine/4942f44e8c98ef20aaf1b05c6329efa6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Local Storage Lab</title> | |
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"> | |
<style> | |
body { padding: 20px; } | |
</style> | |
</head> | |
<body> | |
<form onsubmit="save(event)"> | |
<input id="email" type="email" placeholder="E-mail"> | |
<input id="senha" type="password" placeholder="Senha"> | |
<input id="saveButton" type="submit" value="Salvar dados"> | |
</form> | |
<hr> | |
<div> | |
<p> | |
Email salvo: <span id="savedEmail"></span> | |
</p> | |
<p> | |
Senha salva: <span id="savedPassword"></span> | |
</p> | |
<button onclick="load()">Carregar dados salvos</button> | |
<button onclick="clearData()">Limpar dados salvos</button> | |
</div> | |
<script> | |
const emailInput = document.querySelector('#email') | |
const senhaInput = document.querySelector('#senha') | |
const spanEmail = document.querySelector('#savedEmail') | |
const spanSenha = document.querySelector('#savedPassword') | |
function clearData() { | |
console.log('clearData() chamado') | |
localStorage.setItem('email', '') | |
localStorage.setItem('senha', '') | |
spanEmail.textContent = '' | |
spanSenha.textContent = '' | |
load() | |
} | |
function save(event) { | |
console.log(`save() chamado`) | |
event.preventDefault() | |
if (passwordIsValid()) { | |
localStorage.setItem('email', emailInput.value) | |
localStorage.setItem('senha', senhaInput.value) | |
} | |
load() | |
} | |
function load() { | |
console.log(`load() chamado`) | |
spanEmail.textContent = localStorage.getItem('email') | |
spanSenha.textContent = localStorage.getItem('senha') | |
} | |
function passwordIsValid() { | |
const minLength = 8 | |
const senhaLength = senhaInput.value.length | |
if (senhaLength < minLength) { | |
console.log(`Tamanho da senha: ${senhaLength}`) | |
return false | |
} | |
return true | |
} | |
load() | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment