Oturum depolama değeri ikinci sayfada gösterilmiyor
İndex.html'de kullanıcı girdi verilerini almaya çalışıyorum. Daha sonra, kullanıcı bir sonrakini tıkladığında, girdi verilerini getapart.html sayfasında (ikinci sayfa) göstermelidir. Aynı şekilde oturum depolamayı kullanmaya çalışıyorum. Hata yok, ancak değeri göstermiyor. Neyi yanlış yaptığımdan emin değilim.
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 (kullanıcı girişini almak ve verileri görüntülemek için ikinci sayfa)
<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 komut dosyası (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");
}
Yanıtlar
Verileri ayarlamak ve almak için aynı işlevi kullandığınız görülüyor. Bu, birçok durumda karmaşıklığı artırır ve sizin durumunuzdaki sistemi bozar.
Düzenleme: Yükleme olayının yerleşimi de geçersizdir. Bunu body etiketine eklemelisin. Bkz: bir div öğesine onload olayı ekleme
İlk sayfada, seçimden başarıyla veri alırsınız ve oturum depolamaya ayarlıyorsunuz. Bununla birlikte, ikinci sayfada aynı işlevi tekrar tetiklediğinizde, "Year" kimliğine sahip bir öğe olmadığından year1 tanımsız hale gelir.
Sonra bu satırla önce undefined'ı oturum depolamaya koyarsınız ve hemen geri alırsınız.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Çözüm basit. Ayarlayıcı ve alıcı işlevleri bu şekilde ayırırsınız.
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");
}
Ve ilk html'de:
...
<select id="Year" onchange="set_year_data()">
...
Ve secondhtml'de:
...
<body onload="get_year_data()" >
...