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();

编辑：我做了一个附加功能，因此当您只需要检索数据时，您就可以重用代码。分离代码始终是一个好主意，这样更易于理解和维护。希望能有所帮助；让我知道是否可以。

Answer 2

问题发现：

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

在准备HTML DOM之前要执行两行以上，所以 localStorage.setItem（“ userName”，name）; //名称为空

document.getElementById（“ storedName”） // innerHTML为空

这就是为什么引发异常 未捕获的TypeError：无法将属性'innerHTML'设置为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
}

将输入值保存到本地存储中并在其他页面上检索

2 个答案: