Question

function display() {
  document.querySelector(".recipeList").innerHTML = "";
  for (var i = 0; i < arrayOfRecipes.length; i++)
    +document.querySelector(".recipeList").innerHTML += "<button onclick='buttonDirect(" + i + ")'>Start Cooking</button>";
}

function buttonDirect(indexNum) {
  localStorage.setItem("indexNumber", JSON.stringify(indexNum));
  window.location.href = "/display.html";
  buttonClicked();
}

function buttonClicked() {
  JSON.parse(localStorage.getItem("indexNumber"));
  console.log(indexNumber);
}

我正在尝试从一个函数获取数据（索引号）以在HTML页面更改后继续运行。

当前，我有一个运行名为"buttonDirect(indexNum)"的函数的按钮，我希望此函数从一页切换到另一页，因此为什么在函数内使用window.location.href = "/display.html";代码。此后，页面发生更改，因此我尝试通过使用localStorage.setItem("indexNumber", JSON.stringify(indexNum));代码将索引号保存到本地存储来保存索引号。然后，由于JavaScript从上至下读取代码，因此我试图使它在页面更改后运行buttonClicked();函数，以便直到下一页加载后才运行。这样，我可以使用JSON.parse(localStorage.getItem("indexNumber"));检索下一页的索引号，然后使用console.log(indexNumber);控制台记录该索引号。

我很快意识到这是行不通的，因为buttonClicked()函数将在页面实际更改之前运行，这意味着indexNumber将不会在页面更改后被记录。实现我想要做的最好的方法是什么？

Answer 1

buttonClicked()似乎不会被呼叫，因为您已经离开了页面。

页面加载后，您可以从本地存储中获取所需数据：

window.onload = function() {
  const indexNumber = JSON.parse(localStorage.getItem("indexNumber"));
  console.log(indexNumber);
}

（我为JSON.parse的结果添加了一个变量。）

顺便说一句，在第四行，我不知道+是否有错字

+document.querySelector...
^

如何从一个HTML页面到另一个HTML页面进行功能？

1 个答案: