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

Question

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

我什至无法在第 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();

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

Answer 2

问题发现：

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

在准备 HTML 的 DOM 之前执行以上两行，所以 localStorage.setItem("userName", name);//name为空

document.getElementById("storedName") //innerHTML为空

这就是引发异常的原因 Uncaught TypeError: Cannot set 属性 'innerHTML' of null

你的 java 脚本函数应该像下面这样改变

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

当你需要在任何页面显示本地存储数据时，你应该先检查存储可用性然后使用

示例：

if(localStorage.getItem("userName")!=undefined || localStorage.getItem("userName")!==null){
//To Do
}

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

Save Input Value to Local Storage and Retrieve it on a different Page

javascript

textinput

local-storage