El valor de almacenamiento de la sesión no se muestra en la segunda página
Estoy tratando de obtener datos de entrada del usuario en index.html. Luego, una vez que el usuario haga clic en siguiente, debería mostrar los datos de entrada en la página getapart.html (segunda página). Estoy tratando de usar el almacenamiento de sesiones para lo mismo. No hay errores, pero no muestra el valor. No estoy seguro de lo que estoy haciendo mal.
HTML
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="getapart.html">
<legend>Check for your part!</legend><br>
<label>Year:<br />
<select id="Year" onchange="show_yeardata()">
<option> - Select Year - </option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
<br>
<label>Make:<br />
<select id="Make" onchange= show_makedata()">
<option> - Select Make - </option>
<option value="Chevrolet">Chevrolet</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Toyota">Toyota</option>
</select>
<br>
<br><br>
<input type="text" id="showyear"><br>
<input type="text" id="showmake"> <br>
<input type="Submit"; value="Next" />
</form>
</fieldset>
</body>
</html>
getapart.html (segunda página para recuperar la entrada del usuario y mostrar los datos)
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
<a href="index.html"> Home </a>
<br><br><br>
<div onload= "show_yeardata()" >
Year: <span id="ss_showyear"> </span><br>
Make: <span id="ss_showmake"> </span><br>
</div>
</body>
</html>
Secuencia de comandos JS (showdata.js)
function show_yeardata()
{
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
function show_makedata()
{
var make = document.getElementById("Make");
var make1 = make.options[make.selectedIndex].text;
document.getElementById("showmake").value=make1;
sessionStorage.setItem("key_showmake",make1);
document.getElementById("ss_showmake").innerHTML = sessionStorage.getItem("key_showmake");
}
Respuestas
Parece que está utilizando la misma función para configurar y obtener los datos. Esto aumenta la complejidad en muchos casos y rompe el sistema en su caso.
Editar: la ubicación del evento onload tampoco es válida. Deberías poner eso en la etiqueta del cuerpo. Ver: Cómo agregar un evento onload a un elemento div
En la primera página, obtiene los datos de la selección y los configura para el almacenamiento de la sesión. Sin embargo, cuando activa la misma función nuevamente en la segunda página, year1 se vuelve indefinido ya que no hay ningún elemento con id "Year".
Luego, con esta línea, primero coloca undefined en el almacenamiento de la sesión y luego lo recupera de inmediato.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
La solución es simple. Divides las funciones de setter y getter de esta manera.
function set_year_data() {
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
}
function get_year_data() {
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
Y en el primer html:
...
<select id="Year" onchange="set_year_data()">
...
Y en el segundo html:
...
<body onload="get_year_data()" >
...