会话存储值未显示在第二页中答案

【问题标题】：Session storage value not showing in second page会话存储值未显示在第二页中
【发布时间】：2020-12-04 23:16:59
【问题描述】：

我正在尝试在 index.html 中获取用户输入数据。然后一旦用户单击下一步，它应该在 getapart.html 页面（第二页）中显示输入数据。我正在尝试使用会话存储。没有错误，但它不显示值。不知道我做错了什么。

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（检索用户输入并显示数据的第二页）

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

【问题讨论】：

在第一页中设置您想要在会话存储中显示的项目并在第二页中检索相同的项目并将会话存储的值设置为您想要的任何一个......对于参考：stackoverflow.com/questions/18076013/…

标签： javascript html session-storage

【解决方案1】：

看起来您正在使用相同的函数来设置和获取数据。在许多情况下，这会增加复杂性并破坏您的系统。

编辑： onload 事件的放置也是无效的。你应该把它放到body标签上。见：How to add onload event to a div element

在第一页中，您成功地从选择中获取数据并设置为会话存储。但是，当您在第二页再次触发相同的函数时，year1 将变为未定义，因为没有 id 为“Year”的元素。

然后使用这些行，您首先将 undefined 放入会话存储中，然后立即将其取回。

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

解决方案很简单。您可以像这样拆分 setter 和 getter 函数。

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

在第一个 html 中：

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

而在第二个html中：

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

【讨论】：

谢谢科雷。我从开发人员工具中检查了会话存储，它与我选择的值一起存储。我尝试按照您的建议进行拆分。但是这些值仍然没有显示在第二个 html 页面中。
onload 事件的放置也是无效的。它应该在 body 标签内。我编辑了答案。