3
respostas

Como levar um valor de uma página html para outra pelo javascript?

Pessoal eu ainda não achei nenhuma função ou captador de conteúdo para levar um valor de uma página para outra (tipo document.querySelector...). Será que podiam me ajudar? EX: fiz uma função Math.floor(Math.random()*10) em uma página e queria que que esse mesmo valor fosse levado para outra página através do javascript ou qualquer outra forma para nessa segunda página fazer uma soma dos valores. Desculpe se está meio confuso mas é que se eu postar o código do meu programa irão ser mais de 4 códigos (2 html, 1 css e 2 javascript)

Mesmo se não conseguir muita ajuda eu agradeço de qualquer forma.

3 respostas

Jose, Pelo que compreendi, você deseja persistir os dados, confere? A melhor prática é persistir esses dados no backend e recuperar novamente no frontend carregando no DOM. O que você pode tentar fazer é persistir em cookies, porém não é uma boa prática.

Seré que com o uso de PHP eu conseguiria isso? Ainda não cheguei a estudar PHP então não tenho certeza.

José, pelo que pude extrair a sua aplicação não possui uma camada de persistência. Não tem problema.

Você também pode fazer via javascript, usando alguns recursos como: sessionStorage, localStorage e cookies.

A sessionStorage e localStorage são recursos do HTML5 que permite que você salve na sessão do navegador, de forma fixa (localStorage) ou temporária (sessionStorage) algumas informações, e com isso você pode acessar na outra página.

Vou exemplificar como funcionaria a utilização do localStorage, no seguinte contexto: criei 2 páginas html, no qual na primeira página (page1.html) a pessoa digita um valor no input text. Este valor é armazenado no localStorage.

Na segunda página (page2.html), este valor é recuperado e exibido no parágrafo através de um evento inserido no botão.

Segue o html com script da Page1:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Teste Session - Page 1</title>
</head>

<body>
    <div>
        <h2>Page 1</h2>
    </div>
    <div>
        <input type="text" value="" id="inputText">
        <input type="button" id="inputButton" value="Salvar valor na session storoge">
    </div>
    <script>
        var btn = document.querySelector("#inputButton");

        btn.addEventListener("click", function () {
            var text = document.querySelector("#inputText").value;
            localStorage.setItem('valueText', text);
        })
    </script>
</body>

</html>

Segue o html com script da Pag2:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Teste Session - Page 2</title>
</head>

<body>
    <div>
        <h2>Page 2</h2>
    </div>
    <div>
        <p id="viewSessionSotorage"></p>
        <input type="button" id="inputButton2" value="Exibir o valor da session storage">
    </div>
    <script>
        var btn2 = document.querySelector("#inputButton2");

        btn2.addEventListener("click", function () {
            var paragrafo = document.querySelector("#viewSessionSotorage");
            paragrafo.textContent =  localStorage.getItem('valueText');
        })
    </script>
</body>

</html>

Caso você tenha dúvidas pode responder.

Caso tenha interesse também pode dar uma lida neste post: https://www.devmedia.com.br/html5-storage-armazenando-dados-com-html5/28797