O valor de armazenamento da sessão não aparece na segunda página
Estou tentando obter dados de entrada do usuário em index.html. Então, quando o usuário clicar em Avançar, ele deverá mostrar os dados de entrada na página getapart.html (segunda página). Estou tentando usar o armazenamento de sessão para o mesmo. Não há erros, mas não mostra o valor. Não tenho certeza do que estou fazendo de errado.
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 a entrada do usuário e exibir os dados)
<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>
Script 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");
}
Respostas
Parece que você está usando a mesma função para definir e obter os dados. Isso aumenta a complexidade em muitos casos e interrompe o sistema no seu caso.
Editar: a colocação do evento onload também é inválida. Você deve colocar isso na tag do corpo. Veja: Como adicionar evento onload a um elemento div
Na primeira página, você obtém dados da seleção e os define para o armazenamento da sessão. No entanto, quando você aciona a mesma função novamente na segunda página, o ano1 se torna indefinido, pois não há nenhum elemento com id "Ano".
Então, com essas linhas, você primeiro coloca undefined no armazenamento da sessão e, em seguida, o recupera imediatamente.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
A solução é simples. Você divide as funções setter e getter assim.
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");
}
E no primeiro html:
...
<select id="Year" onchange="set_year_data()">
...
E no segundo html:
...
<body onload="get_year_data()" >
...