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

Question

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

    <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>

Answer 1

push()返回数组的新长度。 因此，您的代码将数组的长度放入 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 = [];
}

Answer 2

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

您可以将数据存储在变量中，然后运行 function 循环输入该数据并显示它：

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

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-11-22 18:11:24

解决方案2
1 2019-11-22 18:13:47

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-11-22 18:11:24

解决方案2 1 2019-11-22 18:13:47

解决方案1
1 已采纳 2019-11-22 18:11:24

解决方案2
1 2019-11-22 18:13:47