Il valore di archiviazione della sessione non viene visualizzato nella seconda pagina
Sto cercando di ottenere i dati di input dell'utente in index.html. Quindi, una volta che l'utente fa clic su Avanti, dovrebbe mostrare i dati di input nella pagina getapart.html (seconda pagina). Sto cercando di utilizzare l'archiviazione della sessione per lo stesso. Non ci sono errori, ma non mostra il valore. Non sono sicuro di cosa sto facendo di sbagliato.
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 (seconda pagina per recuperare l'input dell'utente e visualizzare i dati)
<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");
}
Risposte
Sembra che tu stia utilizzando la stessa funzione per impostare e ottenere i dati. Ciò aumenta la complessità in molti casi e interrompe il sistema nel tuo caso.
Modifica: anche il posizionamento dell'evento onload non è valido. Dovresti metterlo nel tag body. Vedi: Come aggiungere un evento onload a un elemento div
Nella prima pagina si ottengono correttamente i dati dalla selezione e si imposta la memorizzazione della sessione. Tuttavia, quando si attiva nuovamente la stessa funzione nella seconda pagina, year1 diventa indefinito poiché non è presente alcun elemento con ID "Year".
Quindi con queste righe prima metti undefined nella memoria della sessione, quindi lo riavrai immediatamente.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
La soluzione è semplice. Hai diviso le funzioni setter e getter in questo modo.
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 nel primo html:
...
<select id="Year" onchange="set_year_data()">
...
E nel secondohtml:
...
<body onload="get_year_data()" >
...