Estoy tratando de pasar un valor de entrada de una página a otra página. El uso del almacenamiento local fue útil, pero cuando intento cambiar el valor en la segunda página, no cambia, quiero poder cambiar eso..
código html para la primera página
<html> <head> <title> Input Form </title> <link rel="stylesheet" href="style.css" /> <script> function handleSubmit () { const name = document.getElementById('name').value; const surname = document.getElementById('surname').value; localStorage.setItem("NAME", name); localStorage.setItem("SURNAME", surname); return; } </script> </head> <body> <form action="result.html" method="POST"> <input type="text" id="name" name="name" placeholder="Enter name.." /> <input type="text" id="surname" name="surname" placeholder="Enter surname.." /> <input type="submit" onclick="handleSubmit()"/> </form> </body> </html>código html para la segunda página
<html> <head> <title> Result Page </title> <link rel="stylesheet" href="style.css" /> <script> window.addEventListener('load', () => { const name = sessionStorage.getItem('NAME'); const surname = sessionStorage.getItem('SURNAME'); document.getElementById('result-name').value = name; document.getElementById('result-surname').value = surname; }) </script> </head> <body> <h1> Result Page </h1> <h2> Name: <input id="result-name" /> </h2> <h2> Surname: <input id="result-surname" /> </h2> </body> </html>Está utilizando el almacenamiento local para configurar el elemento. Debe usar el almacenamiento local para obtener el artículo. No almacenamiento de sesión.
Estoy hablando de estas líneas aquí:
const name = sessionStorage.getItem('NAME'); const surname = sessionStorage.getItem('SURNAME');Te lo cambié. Simplemente copia y pega toda la página y listo.
<html> <head> <title> Result Page </title> <link rel="stylesheet" href="style.css" /> <script> window.addEventListener('load', () => { const name = localStorage.getItem('NAME'); const surname = localStorage.getItem('SURNAME'); document.getElementById('result-name').value = name; document.getElementById('result-surname').value = surname; }) </script> </head> <body> <h1> Result Page </h1> <h2> Name: <input id="result-name" /> </h2> <h2> Surname: <input id="result-surname" /> </h2> </body> </html>Leer en almacenamiento local frente a almacenamiento de sesión. Son un poco diferentes.