Der Sitzungsspeicherwert wird auf der zweiten Seite nicht angezeigt
Ich versuche, Benutzereingabedaten in index.html abzurufen. Sobald der Benutzer auf "Weiter" klickt, sollten die Eingabedaten auf der Seite "getapart.html" (zweite Seite) angezeigt werden. Ich versuche, den Sitzungsspeicher für denselben zu verwenden. Es gibt keine Fehler, aber der Wert wird nicht angezeigt. Ich bin mir nicht sicher, was ich falsch mache.
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 (zweite Seite zum Abrufen der Benutzereingaben und Anzeigen der Daten)
<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>
JS-Skript (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");
}
Antworten
Sieht so aus, als würden Sie dieselbe Funktion zum Einstellen und Abrufen der Daten verwenden. Dies erhöht in vielen Fällen die Komplexität und bricht das System in Ihrem Fall.
Bearbeiten: Die Platzierung des Onload-Ereignisses ist ebenfalls ungültig. Sie sollten das auf das Body-Tag setzen. Siehe: Hinzufügen eines Onload-Ereignisses zu einem div-Element
Auf der ersten Seite erhalten Sie erfolgreich Daten aus der Auswahl und setzen auf den Sitzungsspeicher. Wenn Sie jedoch dieselbe Funktion auf der zweiten Seite erneut auslösen, wird Jahr1 undefiniert, da kein Element mit der ID "Jahr" vorhanden ist.
Dann setzen Sie mit dieser Zeile zuerst undefiniert in den Sitzungsspeicher und erhalten ihn dann sofort zurück.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Die Lösung ist einfach. Sie teilen Setter- und Getter-Funktionen wie diese auf.
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");
}
Und im ersten HTML:
...
<select id="Year" onchange="set_year_data()">
...
Und im secondhtml:
...
<body onload="get_year_data()" >
...