La valeur de stockage de session ne s'affiche pas sur la deuxième page
J'essaie d'obtenir les données d'entrée de l'utilisateur dans index.html. Ensuite, une fois que l'utilisateur clique sur suivant, il doit afficher les données d'entrée dans la page getapart.html (deuxième page). J'essaye d'utiliser le stockage de session pour la même chose. Il n'y a pas d'erreurs, mais il n'affiche pas la valeur. Je ne sais pas ce que je fais 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 (deuxième page pour récupérer l'entrée utilisateur et afficher les données)
<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");
}
Réponses
Il semble que vous utilisez la même fonction pour définir et obtenir les données. Cela augmente la complexité dans de nombreux cas et casse le système dans votre cas.
Edit: Le placement de l'événement onload est également invalide. Vous devriez mettre ça sur la balise body. Voir: Comment ajouter un événement onload à un élément div
Dans la première page, vous obtenez avec succès les données de la sélection et définissez le stockage de session. Cependant, lorsque vous déclenchez à nouveau la même fonction dans la deuxième page, year1 devient indéfini car il n'y a pas d'élément avec l'ID "Year".
Ensuite, avec ces lignes, vous mettez d'abord undefined dans le stockage de session, puis vous le récupérez immédiatement.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
La solution est simple. Vous divisez les fonctions setter et getter comme ceci.
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");
}
Et dans le premier html:
...
<select id="Year" onchange="set_year_data()">
...
Et dans le secondhtml:
...
<body onload="get_year_data()" >
...