Javascript 会话存储值未显示在第二页中_Javascript_Html_Session Storage

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

javascript html

Javascript 会话存储值未显示在第二页中,javascript,html,session-storage,Javascript,Html,Session Storage,我正在尝试在index.html中获取用户输入数据。然后，一旦用户单击next，它就会在getsparte.html页面（第二页）中显示输入数据。我正在尝试使用会话存储进行同样的操作。没有错误，但它不显示值。不知道我做错了什么 HTML 看起来您正在使用相同的函数来设置和获取数据。在许多情况下，这会增加复杂性，并在您的情况下破坏系统编辑：onload事件的位置也无效。你应该把它放在身体标签上。见：在第一个页面中，您成功地从选择中获取数据并将其设置为会话存储。但是，当您在第二页再次触发相同的函

我正在尝试在index.html中获取用户输入数据。然后，一旦用户单击next，它就会在getsparte.html页面（第二页）中显示输入数据。我正在尝试使用会话存储进行同样的操作。没有错误，但它不显示值。不知道我做错了什么

HTML

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

编辑：onload事件的位置也无效。你应该把它放在身体标签上。见：

在第一个页面中，您成功地从选择中获取数据并将其设置为会话存储。但是，当您在第二页再次触发相同的函数时，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标签内。我编辑了答案。

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

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

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