javascript - 存储 html 文档中的变量以在另一个文档中显示它

Question

在第一页上，要求用户从列表中选择一个名称(select/option 标签)并单击“edit”按钮。用户的选择使用“option”变量存储，我们将他/她重定向到下一页。

当下一页的正文加载时，它会触发第二个函数，该函数将之前制作的选项显示为页面的主标题。

问题是，虽然 onEdit() 运行，但 displayOption() 将变量显示为空字符串(如函数上方声明的那样)。

为什么第二个函数“看不到”变化？

var option = "";

//"edit" button (onclick)
function onEdit() {
  var selector = document.getElementById("selector");
  option = selector.options[selector.selectedIndex].value;

  window.location.href = "nextPage.html";

  return false;
}

//"nextPage.html" body (onload)
function displayOption() {
  var header = document.getElementById("header-main");
  header.innerHTML = option;
}

Answer 1

为此使用本地存储，它易于使用，在这种情况下非常合适。

参见 mdn docs

示例

在第一页简单声明

localStorage.setItem('option', 'selectedOption');

在第二页获取var

var option = localStorage.getItem('option');

编辑

正如 wendelin 评论的那样，使用 session 存储更合适，因为它会自动删除。