javascript - 来自 localstorage 的值未保存在屏幕上

Question

我在 js 中创建了一个简单的文本框应用程序，在应用程序中输入一个值时它会暂时保存，但我想永久保存它。我使用了本地存储，但我不喜欢它。

这是 JavaScript 部分

function addValue(){
  let ad = document.getElementById("u");
  let newli = document.createElement("li");

  newli.textContent = document.getElementById("box3").value;

  document.getElementById("box3").value = " ";
   let local = ad.appendChild(newli);
  localStorage.setItem('name',local.textContent);
  

}

这是html部分

<ul id="u">
        <li>task1 </li>
        <li> task 2 </li>
        <li> task 3</li>
    </ul>

    <input type="text" id= "box3">

    <input type="button" value="add " onclick="addValue()">

Answer 1

您需要将数据存储在数组中。

像这样保存 localStorage.setItem('name',local.textContent); 会用新值覆盖内容。

使用数组，您可以追加新内容而不是覆盖它。

使用此代码

    var storage = localStorage.getItem("name");
    if (storage) {
      var storageContent = JSON.parse(localStorage.getItem("name"));
      storageContent.push(newli.textContent);
      localStorage.setItem("name", JSON.stringify(storageContent));
    } else {
      localStorage.setItem("name", JSON.stringify([newli.textContent]));
    }