Значение хранилища сеанса не отображается на второй странице
Я пытаюсь получить данные, вводимые пользователем, в index.html. Затем, когда пользователь нажимает «Далее», он должен отобразить входные данные на странице getapart.html (вторая страница). Я пытаюсь использовать хранилище сеансов для того же. Ошибок нет, но значение не отображается. Не уверен, что делаю не так.
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 (вторая страница для получения пользовательского ввода и отображения данных)
<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 скрипт (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");
}
Ответы
Похоже, вы используете ту же функцию для настройки и получения данных. Это увеличивает сложность во многих случаях и ломает систему в вашем случае.
Изменить: размещение события загрузки также недопустимо. Вы должны поместить это в тег тела. См .: Как добавить событие onload к элементу div
На первой странице вы успешно получаете данные из выборки и устанавливаете в хранилище сеанса. Однако, когда вы снова запускаете ту же функцию на второй странице, year1 становится неопределенным, поскольку нет элемента с идентификатором «Year».
Затем с помощью этой строки вы сначала помещаете undefined в хранилище сеанса, а затем немедленно получаете его обратно.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Решение простое. Вы разделяете функции установки и получения следующим образом.
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");
}
И в первом html:
...
<select id="Year" onchange="set_year_data()">
...
И во втором HTML:
...
<body onload="get_year_data()" >
...