javascript - 将输入值保存到本地存储并在不同的页面上检索它

Question

我有一个包含 3 个不同页面的网页:page1、page2 和 page3。在第一页上，用户将在文本框中键入他的姓名。我想将该值存储到本地存储，以便在 page2 和 page3 上再次使用。

我什至无法在第 1 页上检索到它。难道我做错了什么？而且我不知道如何在不同的页面上检索它。有帮助吗？

function myFunction() {
var name = document.getElementById("myInput").value;
document.getElementById("greeting").innerHTML = "Hello, " + name + "! Welcome!";
}

localStorage.setItem("userName", name);
document.getElementById("storedName").innerHTML = localStorage.getItem("userName");

<p>What is your name?</p>

<input id="myInput" type="text" placeholder="Name Surname">

<button onclick="myFunction()">Answer</button>

<p id="greeting"></p>
<p id="storedName"></p>

Answer 1

你只需要做一些改变:

function getName() {
  return localStorage.getItem("userName");
}

function updateHTML() {
  var name = getName();
  document.getElementById("greeting").innerHTML = "Hello, " + name + "! Welcome!";
  document.getElementById("storedName").innerHTML = name;
}

function myFunction() {
  // Gets input value
  var name = document.getElementById("myInput").value;

  // Saves data to retrieve later
  localStorage.setItem("userName", name);
  
  // Updates HTML
  updateHTML();
}

请注意，您的代码没有问题；唯一的问题是 2 行在函数之外，仅此而已。然后，在您的其他页面中，您可以使用 updateHTML 函数:

updateHTML();

编辑:我创建了一个附加功能，这样您就可以在只需检索数据时重用代码。此外，分离代码总是一个好主意，这样更容易理解和维护。希望它有所帮助；如果没有，请告诉我。