Session storage value not showing in second page

Question

I am trying to get user input data in index.html. Then once user clicks on next, it should show the input data in the getapart.html page(second page). I am trying to use session storage for same. There are no errors, but it doesn't show the value. Not sure what I am doing wrong.

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 (second page to retrieve the user input and display the 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>

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

In the first page set the item you want to show in session storage and retrieve the same in second page and set the session stored value to whichever you want .... for ref : https://stackoverflow.com/questions/18076013/setting-session-variable-using-javascript — KcH, Aug 15 '20 at 06:59

Koray Kural · Answer 1 · 2020-08-15T10:24:09.213

Looks like you are using same function for setting and getting the data. This increases complexity in many cases and brokes the system in your case.

Edit: Placement of the onload event is also invalid. You should put that to the body tag. See: How to add onload event to a div element

In the first page you successfully get data from selection and set to the session storage. However, when you trigger the same function again in the second page, year1 becomes undefined since there is no element with id "Year".

Then with these line you first put undefined to session storage then get it back immediately.

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

Solution is simple. You split setter and getter functions like this.

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

And in the first html:

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

And in the secondhtml:

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

Thanks Koray. I checked session storage from developer tools and it is stored with values that I have selected. I tried splitting as per your suggestion. But still the values are not showing in the second html page. — noob619, Aug 15 '20 at 10:00
Placement of the onload event is also invalid. It should be inside the body tag. I edited the answer. — Koray Kural, Aug 15 '20 at 10:24

Session storage value not showing in second page

1 Answers1