"undefined" 会话存储中的元素有问题

Question

请多多关照，我是未来的小开发者

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

问题： devaux API 的自行车站名称 return 没问题。我显示它#station-name。我将它保存在会话存储中。但是当我尝试在 -> undefined

之后收集它时

姓名和名字一切正常（保存在本地存储中）。

你能帮帮我吗？

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;

Answer 1

您正在将项目设置为会话存储，而您正试图从 localStorage 获取它。这就是为什么使用 localStorage 或 sessionStorage

let stationNom = localStorage.getItem('station-name'); 改为

let stationNom = sessionStorage.getItem('station-name');

Answer 2

if(localStorage.getItem('name') && localStorage.getItem('forename') && sessionStorage.getItem('station-name')) {
        let stationNom = localStorage.getItem('station-name');
        let name = localStorage.getItem('name');
        let forename = localStorage.getItem('forename');
}

如果你在 sessionStorage 中查找； let stationNom = localStorage.getItem('station-name'); 在本地

Answer 3

我已经查看了您的代码。问题是这一行 https://github.com/ldoba/project-03/blob/master/js/form.js#L23

sessionStorage.setItem('station-name', stationName.value);

这应该是 textContent，因为您正在从 span 标签

中获取值

sessionStorage.setItem('station-name', stationName.textContent);

console.log() 相同 https://github.com/ldoba/project-03/blob/master/js/form.js#L26

我也会建议改

canvasbtn.addEventListener('click', function() {

到

btnSubmit.addEventListener('click', function() {

因为您正在 form.js 文件上创建一个变量。 https://github.com/ldoba/project-03/blob/master/js/form.js#L6

"undefined" 会话存储中的元素有问题

"undefined" problem with element on session storage

html

javascript

undefined

session-storage