Question

我创建了一段代码，用于将输入字段中的数据存储到一个空数组中。在将数据存储在数组中之后，我希望将此数据保存在本地存储中。现在我不熟悉使用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>

Answer 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 = [];
}

Answer 2

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

您可以将数据存储在变量中，然后运行一个函数以循环访问此数据并显示它：

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

我想能够存储和显示数组中以及本地存储中的数据吗？

2 个答案: