3 votes

La valeur de stockage de la session n'apparaît pas sur la deuxième page

J'essaie d'obtenir les données entrées par l'utilisateur dans index.html. Puis, lorsque l'utilisateur clique sur next, les données saisies doivent apparaître dans la page getapart.html (deuxième page). J'essaie d'utiliser le stockage de session pour cela. Il n'y a pas d'erreur, mais la valeur ne s'affiche pas. Je ne suis pas sûr de ce que je fais mal.

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 (deuxième page pour récupérer l'entrée de l'utilisateur et afficher les données)

<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 script (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");
}

0voto

Koray Kural Points 138

Il semble que vous utilisiez la même fonction pour définir et obtenir les données. Cela augmente la complexité dans de nombreux cas et casse le système dans votre cas.

Edit : Le placement de l'événement onload est également invalide. Vous devriez le placer dans la balise body. Voir : Comment ajouter l'événement onload à un élément div ?

Dans la première page, vous avez réussi à obtenir des données de la sélection et à les placer dans le stockage de la session. Cependant, lorsque vous déclenchez à nouveau la même fonction dans la deuxième page, year1 devient indéfini car il n'y a pas d'élément avec l'id "Year".

Ensuite, avec ces lignes, vous mettez d'abord undefined dans le stockage de la session puis vous le récupérez immédiatement.

sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");

La solution est simple. Vous divisez les fonctions setter et getter comme ceci.

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");
}

Et dans le premier html :

...
<select id="Year" onchange="set_year_data()">
...

Et dans le secondhtml :

...
<body onload="get_year_data()" >
...

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X