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

Posted 2023-04-18

【中文标题】将输入值保存到本地存储并在不同的页面上检索它

【英文标题】：Save Input Value to Local Storage and Retrieve it on a different Page

【发布时间】：2019-03-01 11:59:15

【问题描述】：

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

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

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>

【参考方案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();

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

【讨论】：

帮助很大！太感谢了！！现在我只是在第二页上使用存储的名称时遇到了问题，但在句子的中间......就像，有一个标题说“欢迎回来（用户名）。”

我又改了代码，看一下；我已经分隔了 1 行，并使其成为另一个功能。现在你可以做：“欢迎回来”+getName()+”。”在第二页上。

非常感谢您的帮助！我还是个初学者，在你的帮助下我学到了很多！

【参考方案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 property '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