Session storage value not showing in second page

user_14095796 0
Viewed 643

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");
}
session-storage html javascript
1 Answers

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()" >
...
user_140934190
Related