我希望能够存储和显示来自数组和本地存储内部的数据？答案

【问题标题】：i want to be able to store and display data from an array and inside localstorage?我希望能够存储和显示来自数组和本地存储内部的数据？
【发布时间】：2019-11-23 02:18:54
【问题描述】：

我创建了一段代码来将输入字段中的数据存储到一个空数组中。在我将数据存储在数组中之后，我希望将这些数据保存在本地存储中。现在我不熟悉用于保存数组的 localStorage。但我的观点是我想要的是每次我向数组添加一个新值，并且在我刷新浏览器之后，我不想丢失显示在浏览器窗口中的数据，如下例所示，我也希望数据一直显示在浏览器中。

    <body>
    <input type="text" id="name" ><br>
    <input type="submit" id="btn" value="push"><br>
    <p id="para"></p>

<script>
    var btn = document.getElementById("btn");
    var para =document.getElementById("para");
    var list =[];


    btn.onclick=function(){
        var name =document.getElementById("name").value;
        /* list.push(name); */
        var i;

        localStorage.setItem("list",JSON.stringify(list.push(name)));
        JSON.parse(localStorage.getItem("list"));

        for(i=0;i<list.length;i++){
            n=list[i];
        }
        para.innerHTML+=n+"<br>";


    }

</script>
</body>

【问题讨论】：

标签： javascript arrays local-storage

【解决方案1】：

push() returns the new length of the array。因此，您的代码将数组的长度放入 localStorage 而不是您的数组。字符串化list 本身：

list.push(name);
localStorage.setItem("list",JSON.stringify(list));

此外，如果您在页面加载时需要它，您需要更改初始 list 的分配

var list;
//use localStorage["list"] or if not set use a new empty array
if(localStorage["list"]){
  list = JSON.parse(localStorage["list"]);
  //if you want to display list on page load
  //otherwise dont need below loop
  for(let i=0;i<list.length;i++){
    n += list[i];
  }
  para.innerHTML = n+"<br>";
} else { 
  list = [];
}

【讨论】：

Patrick 以及我应该如何让它在我刷新网页后不会丢失数据
@eliot 您不会在页面重新加载时丢失数据，它仍然在 localStorage 中，如果您的意思是让它在重新加载时显示内容，只需在加载时使用 for 循环（例如我在例子中）

【解决方案2】：

保存数据的部分做得很好，但是在加载时检索数据并不完全正确......

您可以将数据存储在一个变量中，然后运行一个函数来循环输入这些数据并显示它：

var data = JSON.parse(localStorage.getItem("list"));

【讨论】：

我明白了，代码正在运行，但我想要的是在我刷新网页后我希望数据仍然能够在浏览器中可用，例如，我放了一些随机的输入字段中的名称，每次刷新页面时这些名称在浏览器中可见