如何讓網站使用 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

我認為你有兩個問題。

第一個是設置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();
}

Answer 2

您沒有更新屏幕上的給定名稱，您只是在 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>
  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。