Wartość pamięci sesji nie jest wyświetlana na drugiej stronie
Próbuję uzyskać dane wejściowe użytkownika w pliku index.html. Następnie, gdy użytkownik kliknie następny, powinien wyświetlić dane wejściowe na stronie getapart.html (drugiej stronie). Próbuję użyć pamięci sesji do tego samego. Nie ma błędów, ale nie pokazuje wartości. Nie wiem, co robię źle.
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 (druga strona do pobierania danych wejściowych użytkownika i wyświetlania danych)
<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>
Skrypt 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");
}
Odpowiedzi
Wygląda na to, że używasz tej samej funkcji do ustawiania i pobierania danych. Zwiększa to złożoność w wielu przypadkach i psuje system w twoim przypadku.
Edycja: Umieszczenie zdarzenia onload jest również nieprawidłowe. Powinieneś to umieścić na tagu body. Zobacz: Jak dodać zdarzenie onload do elementu div
Na pierwszej stronie udało Ci się pobrać dane z selekcji i ustawić na pamięć sesji. Jednak po ponownym uruchomieniu tej samej funkcji na drugiej stronie rok1 staje się niezdefiniowany, ponieważ nie ma elementu o identyfikatorze „Year”.
Następnie za pomocą tych linii najpierw umieszczasz undefined w pamięci sesji, a następnie natychmiast odzyskujesz.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Rozwiązanie jest proste. W ten sposób rozdzielasz funkcje ustawiające i pobierające.
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");
}
A w pierwszym html:
...
<select id="Year" onchange="set_year_data()">
...
A w secondhtml:
...
<body onload="get_year_data()" >
...