时间戳

首页 > 解决方案 > 我希望能够存储和显示来自数组和本地存储内部的数据？

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

问题描述

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

标签： javascriptarrayslocal-storage

解决方案

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

推荐阅读