Nilai penyimpanan sesi tidak muncul di halaman kedua
Saya mencoba untuk mendapatkan data masukan pengguna di index.html. Kemudian setelah pengguna mengklik berikutnya, itu akan menampilkan data input di halaman getapart.html (halaman kedua). Saya mencoba menggunakan penyimpanan sesi untuk hal yang sama. Tidak ada kesalahan, tetapi tidak menunjukkan nilainya. Tidak yakin apa yang saya lakukan salah.
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 (halaman kedua untuk mengambil input pengguna dan menampilkan data)
<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>
Skrip 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");
}
Jawaban
Sepertinya Anda menggunakan fungsi yang sama untuk mengatur dan mendapatkan data. Ini meningkatkan kompleksitas dalam banyak kasus dan merusak sistem dalam kasus Anda.
Sunting: Penempatan acara muatan juga tidak valid. Anda harus meletakkannya di body tag. Lihat: Cara menambahkan acara onload ke elemen div
Di halaman pertama Anda berhasil mendapatkan data dari pilihan dan diatur ke penyimpanan sesi. Namun, saat Anda memicu fungsi yang sama lagi di halaman kedua, tahun1 menjadi tidak ditentukan karena tidak ada elemen dengan id "Tahun".
Kemudian dengan baris ini, pertama-tama Anda meletakkan undefined ke penyimpanan sesi, lalu segera mendapatkannya kembali.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Solusinya sederhana. Anda membagi fungsi penyetel dan pengambil seperti ini.
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");
}
Dan di html pertama:
...
<select id="Year" onchange="set_year_data()">
...
Dan di html kedua:
...
<body onload="get_year_data()" >
...