会话存储上的元素"undefined"问题

请注意，我是一个婴儿未来开发人员。

我正在创建一个(假的(网站，在图卢兹(法国(预订自行车。我想把用户选择的自行车站的名称保存在会话存储中，因为我需要在自行车预订后显示它。

问题：API返回的自行车站名称可以。我显示它#station-name。我将其保存在会话存储中。但是当我尝试在->未定义

名称和名字都可以(保存在本地存储中(。

你能帮我吗？

https://github.com/ldoba/project-03

HTML

<div class="row">
<form class="form-group col-sm-12 col-md-6" id="booking-info">
<div class="form-info" id ='form-info'>
<label for="name">Nom</label>
<input type="text" id="name" class="form-control" onkeyup='javascript:isCharSet()'>
<label for="forename">Prénom</label>
<input type="text" id="forename" class="form-control" onkeyup='javascript:isCharSet()'>
</div>
<button href="#modal1" class="btn-dark js-modal btn-reservation" id="btn-booking">Réserver</button>
</form>
</div>
<aside id="modal1" class="modal" aria-hidden="true" role="dialog" aria-labelledby="titlemodal" style="display: none;">
<div class="modal1-wrapper js-modal-stop"> 
<button class="btn btn-dark js-modal-close row col-md-2 float-right">Fermer</button>
<h2 class="row col-md-10" id="titlemodal">Veuillez signer puis cliquer sur "Confirmer la réservation"</h2>
<canvas id="canvas"></canvas>
<button type="button" class="btn btn-light" id="reset">Clear</button>
<button type="button" class="btn btn-success justify-content-md-center row col-md-6 js-modal-close" id="canvasbtn">Confirmer la réservation</button>
</div>
</aside>
</section>

表单的JS部分->

//création des constantes nécessaires
const stationName = document.getElementById('station-name');
const inputName = document.getElementById('name');
const inputForename = document.getElementById('forename');
const btnBooking = document.getElementById('btn-booking');
const btnSubmit = document.getElementById('canvasbtn');
const afterBookingInfos = document.querySelector('.afterBookingInfos');
// desactive le bouton quand le javascript se charge
btnBooking.disabled = true;
// fonction appelee des qu'une touche est enfoncee
function isCharSet() {
// on verifie si le champ n'est pas vide alors on desactive le bouton sinon on l'active
if (inputName.value != "" && inputForename.value != "") {
btnBooking.disabled = false;
} else {
btnBooking.disabled = true;
}  
}
// exécuter la fonction quand le bouton 'Confirmer la réservation' est cliqué
canvasbtn.addEventListener('click', function() {
// stocker le nom et prénom entrés dans le web storage
sessionStorage.setItem('station-name', stationName.value);
localStorage.setItem('name', inputName.value);
localStorage.setItem('forename', inputForename.value);
// exécuter nameDisplayCheck()
nameDisplayCheck();
});
// définit la fonction nameDisplayCheck()
function nameDisplayCheck() {
// vérifie si les éléments 'name' et 'forename' sont stockés dans le web storage
if(localStorage.getItem('name') && localStorage.getItem('forename') && sessionStorage.getItem('station-name')) {
// Si c'est le cas, affiche un message personnalisé
let stationNom = sessionStorage.getItem('station-name');
let name = localStorage.getItem('name');
let forename = localStorage.getItem('forename');
afterBookingInfos.textContent = 'Vélo réservé à la station ' + stationNom + ' par ' + name + ' ' + forename + ' ' + 'Temps restant : ';
} else {
// Sinon, affiche une info générique
afterBookingInfos.textContent = 'Pas de réservation en cours';
}
}
document.body.onload = nameDisplayCheck;