从存储在 localstorage 中的数组中获取数据的最佳方法是什么？

Question

Below as you can see in my code i created a input field for users that i want to store inside of an array, which also i want to store that array into localstorage. Now i think that stored the values that i give trough the input field in localsorage , beacuse that i can see from my browser application in chrome. Now with this code i have some problem.

Each value that i add one by one as you can see in the picture below ,whenever i refresh the browser , the values disapear from the browser? So if someone can help me out with my code i would appriciate a lot , and also give me some advice , since im very new to localstorage and cookies and i am trying to learn

    <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

You're getting undefined because you never assign a value to x prior to using it in x+=f[i]+"<br>" , so it gets the default value undefined , which is then converted to string. Assign "" to x before the loop.

---

Side note: There's no need for f in that code at all. Just use names :

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

You might also consider using join instead of a loop:

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

---

Beware that if any name is entered that contains a < or & , it could potentially mess up your output, since of course those characters start things that are special in HTML (tags and character references, respectively). To prevent that, you might use map before join :

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

or in modern JavaScript:

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

That's only valid if you're outputting to an element's body, as you are in that code; if you were outputting to an attribute value, it would be more complicated. (Some folks would also change > to > , but there isn't any need to if, again, you're outputting to the body of an element and not within a tag.)