Usando localStorage na prática
Olá pessoal, meu nome é Mauricio Junior e hoje eu vou falar um pouco sobre JavaScript usando localStorage e tem uma ótima oportunidade de usar e passar dados de uma página para outra usando poucas linhas de código.
Veja o que temos dentro da plataforma ecode10.academy
O código é bem simples e fácil de fazer usando uma página HTML. Veja o código 1 na página localstorage-01.html.
<!-- Page localstorage-01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local storage</title>
<script>
function Send(){
let name = document.getElementById("TextName").value;
if (!name){
alert("Please add the name");
document.getElementById("TextName").focus();
return;
}
localStorage.setItem("Name", name);
location.replace("localstorage-2.html");
}
</script>
</head>
<body>
<input type="text" id="TextName" placeholder="Type your name"/>
<button onclick="javascript:Send();">Send</button>
</body>
</html>
Código 1 - Página 1
Dentro da página 1 existe apenas uma função chamada Send() que pega o valor que o usuário digitou, verifica se existe alguma coisa, salva os dados no localStorage com o nome de Name e depois redireciona para outra página.
Na página localstorage-02.html o valor é pego e exibido na tela. Veja o código 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Localstorage 2</title>
</head>
<body>
<p id="nameStorage"></p>
</body>
<script>
let name = localStorage.getItem("Name");
document.getElementById("nameStorage").innerText = name;
</script>
</html>
Código 2 - Página localstorage-02.html.
Note que o script está depois da tag body onde o dado é pego com o mesmo nome Name e depois o valor é exibido na tela usando um simples <p>
(parágrafo) com o innerText.
Espero que tenha ajudado e qualquer dúvida pode entrar em contato comigo pelo site www.mauriciojunior.net.
Lembro que tem também um curso de HTML, CSS e JavaScript na página ecode10.academy com o preço promocional, aulas dinâmicas e ainda com certificado.