javascript - 从存储在本地存储中的数组中获取数据的最佳方法是什么？

Question

正如您在我的代码中看到的，我为用户创建了一个输入字段，我想将其存储在一个数组中，我还想将该数组存储到本地存储中。现在我认为存储了我通过 localsorage 中的输入字段提供的值，因为我可以从我的 chrome 浏览器应用程序中看到。现在有了这段代码，我遇到了一些问题。

如下图所示，我一个一个添加的每个值，每当我刷新浏览器时，这些值就会从浏览器中消失？因此，如果有人可以帮助我解决我的代码问题，我会非常感激，并给我一些建议，因为我对 localstorage 和 cookie 非常陌生，而且我正在努力学习

    <input type="text" id="username"><br><br>
<input type="submit"  id="btn">

   <p id="demo"></p> 

<script>
    var btn=document.getElementById("btn");
    var user=document.getElementById("username");
    var names=[];

btn.onclick=function(){

    names.push(user.value);

    localStorage.setItem("names",JSON.stringify(names));

    var f =JSON.parse(localStorage.getItem("names")); 

    var x;

    var i;

        for(i=0;i<f.length;i++){

            x+=f[i]+"<br>";

        }

        document.getElementById("demo").innerHTML=x;

}
</script>

Answer 1

你得到 undefined因为您永远不会为 x 赋值在 x+=f[i]+"<br>" 中使用它之前, 所以它得到默认值 undefined ，然后将其转换为字符串。分配 ""至 x在循环之前。

---

旁注:不需要 f在那个代码中。只需使用 names :

localStorage.setItem("names",JSON.stringify(names));
var x = "";
for (var i = 0; i < names.length; ++i) {
    x += names[i] + "<br>";
}

您也可以考虑使用 join而不是循环:

localStorage.setItem("names",JSON.stringify(names));
var x = names.join("<br>");

---

请注意，如果输入的任何名称包含 <或 & ，它可能会弄乱你的输出，因为当然这些字符开始了 HTML 中特殊的东西(分别是标签和字符引用)。为防止这种情况，您可以使用 map之前 join :

localStorage.setItem("names",JSON.stringify(names));
var x = names.map(function(name) {
    return name.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}).join("<br>");

或者在现代 JavaScript 中:

localStorage.setItem("names",JSON.stringify(names));
const x = names.map(name => name.replace(/&/g, "&amp;").replace(/</g, "&lt;"))
               .join("<br>");

只有在输出到元素主体时才有效，就像在该代码中一样；如果你输出到一个属性值，它会更复杂。 (有些人也会将 > 更改为 > ，但如果再次输出到元素的主体而不是标签内，则没有必要。)