检索本地存储中的所有存储值答案

【问题标题】：Retrive all stored values in local storage检索本地存储中的所有存储值
【发布时间】：2019-08-18 20:57:53
【问题描述】：

主要要求

我真正想要实现的是有一个带有按钮的文本框，用户可以在其中输入值，然后这些值将通过不同的keys 保存到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>

如果用户刷新标签，则检索数据刚刚添加<body onload=funcrtion()，函数编码如下：

<body onload="onloadRetrieveData()">

 function onloadRetrieveData() {
      //check the length 
      var length = localStorage.length;
      var x;
      for (x = 1; x <= length; x++) {
        document.getElementById("hiddenP").innerHTML = window.localStorage.getItem('savedValues' + x);
      }

这将检索用户插入的最后一个数据。如下所示

我是根据这篇文章开始的

The complete guide to using localStorage in JavaScript apps

我现在想要的是当用户刷新选项卡时，所有保存在本地存储中的数据都可以检索并显示给用户。谁能帮我这个？谢谢

【问题讨论】：

标签： javascript html local-storage

【解决方案1】：

这是实现此目的的一种方法，使用您已经拥有的代码，并对如何将最终结果添加到 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);
}

这将在无序列表中显示本地存储中的所有项目，您当然可以选择以您希望的任何格式显示它们。

这里是正在发生的事情的简短摘要，以防有任何不清楚的地方。

代码摘要

在这个版本中，我们正在创建一个无序列表：

var ul = document.createElement('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);
}

请注意，我们每次传递都会创建一个新的列表元素：

var li = document.createElement('li');

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

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

然后，我们将这个文本节点添加到列表项中，最后使用 appendChild() 方法将列表项添加到无序列表中：

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

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

hiddenP.appendChild(ul);

【讨论】：

@DanielSchroeder 你能检查一下这个问题吗stackoverflow.com/questions/57547302/…。我认为你是回答这个问题的最佳人选。谢谢
@NipunTharuksha 感谢您的提醒，在这里给了我最好的机会：stackoverflow.com/a/57562010/5347875
@DanielSchroeder 干得好