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

Image

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.