如何使网站使用 localStorage 将我们输入的内容保存到输入框中？

Question

概念是这样的：

我正在制作一个简单的网站，其中有一个输入框，该网站会将我们输入的内容保存到 localStorage 中，并将其显示在网站正文中。我们可以随时更改输入框中的文字，网站会自动更新。

预期结果
在输入框中键入内容将更新网站

实际结果
什么都没发生

代码如下：

<h1>localStorage Test</h1>

<form>
  <label for="name">Your Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <button onclick="saveName()" type="button">Save Name</button>
</form>

<br>

<p id="output"> </p>

<script>
  document.getElementById("output").value = localStorage.getItem("name");
  
  function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
  }
</script>

提前致谢。

Answer 1

您没有更新屏幕上的给定名称，您只是在本地存储中更新它。你需要这样写：

<h1>localStorage Test</h1>
<form>
  <label for="name">Your Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <button onclick="saveName()" type="button">Save Name</button>
</form>

<br>

<p id="output"> </p>

<script>
  function setName(name){
    document.getElementById("output").textContent = name;
  }

  let currentNameInStoarge = localStorage.getItem("name");
  if(currentNameInStoarge !== null) setName(currentNameInStoarge);
  
  function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
    setName(name.value);
  }
</script>

我还在开头添加了一个检查，以检查 localStorage 是否有“名称”属性。
正如@David 所说，<p> 元素没有“值”属性，所以我将其更改为 textContent。

Answer 2

我认为你有两个问题。

第一个是你设置localstorage后没有更新元素。这可以通过将代码放入函数中并在更新值后调用该函数来完成。

其次，要在 <p> 标签内显示文本，您需要使用 innerHTML 或最好使用 innerText.

参见下面的示例代码

function getName() {
    document.getElementById("output").innerText = localStorage.getItem("name");
}
getName();

function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
    getName();
}

如何使网站使用 localStorage 将我们输入的内容保存到输入框中？

How do I make a website save what we type into an input box using localStorage?

html

javascript

local-storage