Javascript 检索本地存储中的所有存储值

主要要求

<script>
  var i = 0;
  function insertUserInput() {
    i++;
    //fetch the value
    var insertedValue = document.getElementById("idUserInputs").value;
    //set the value to show user
    document.getElementById("hiddenP").innerHTML = insertedValue;
    //set the value to localstorage with different key(via incremental i)
    window.localStorage.setItem("savedValues" + i, insertedValue);
  }
</script>

我真正想要实现的是，有一个带有按钮的文本框，用户可以在其中输入值，然后通过不同的

键将这些值保存到
localStorage
（以便即使在页面刷新时也可以检索这些值），并且插入的值也将显示在文本框下

我是如何做到这一点的：

HTML

<div>
  <input type="text" name="userInputs" placeholder="Please insert the value" id="idUserInputs">
  <button onclick="insertUserInput()">Add</button>
  <p id="hiddenP"></p>
</div>


添加


JavaScript

<script>
  var i = 0;
  function insertUserInput() {
    i++;
    //fetch the value
    var insertedValue = document.getElementById("idUserInputs").value;
    //set the value to show user
    document.getElementById("hiddenP").innerHTML = insertedValue;
    //set the value to localstorage with different key(via incremental i)
    window.localStorage.setItem("savedValues" + i, insertedValue);
  }
</script>


var i=0；
函数insertUserInput（）{
i++；
//获取值
var insertedValue=document.getElementById（“idUserInputs”）.value；
//设置显示用户的值
document.getElementById（“hiddenP”）.innerHTML=insertedValue；
//使用不同的键将值设置为localstorage（通过增量i）
window.localStorage.setItem（“savedValue”+i，insertedValue）；
}

要在用户刷新刚刚添加的选项卡时检索数据，这里有一种方法，使用您已有的代码，并对如何将最终结果添加到DOM进行一些小的调整：

var hiddenP = document.getElementById('hiddenP');
var ul = document.createElement('ul');

function onloadRetriveData() {
  //check the length 
  var length = localStorage.length;
  var storedValues = [];
  console.log(length);
  var x;
  for (x = 1; x <= length; x++) {
    var li = document.createElement('li');
    var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));
    li.appendChild(textContent);
    ul.appendChild(li);
  } 
  hiddenP.appendChild(ul);
}

然后，在循环过程中，我们将本地存储中的每个项目添加到列表中：

for (x = 1; x <= length; x++) {
    var li = document.createElement('li');
    var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));
    li.appendChild(textContent);
    ul.appendChild(li);
}

然后，我们创建一个textNode，将本地存储中的项作为值：

var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));

然后，我们将此文本节点添加到列表项中，最后使用appendChild（）方法将列表项添加到无序列表中：

然后，在循环之后，我们再次使用appendChild（）方法将整个列表添加到hiddenP段落元素中：

@DanielSchroeder你能检查一下这个问题吗。我认为你是回答这个问题的最佳人选。Thanks@NipunTharuksha谢谢你的提醒，我在这里尽了最大努力：@DanielSchroeder干得好
var li = document.createElement('li');

var textContent = document.createTextNode(window.localStorage.getItem('savedValues' + x));

li.appendChild(textContent);
ul.appendChild(li);

hiddenP.appendChild(ul);