How should i store newly created elements in JavaScript?

Question

I running in some issues with my code below. I have achieved to create a new element and add it to the Option list. Now a whenever i refresh the page the new element will disappear from the list.I am not familiar how cookies or session works in JavaScript. But how could i store those element and whenever i create a new element to be able to be in the Option list even after refreshing. Sorry for my English , and thank you for the help in advance. My code is below as you can see.

    <select name="name" id="name">

        <option value="burim" class="someName">burim</option>
        <option value="eliot" class="someName">eliot</option>
        <option value="saska" class="someName">saska</option>

    </select>
    <br><br>
    <input type="text" id="add">
    <input type="submit" name="submit" value="ADD list" id="btn">
    <p class="output"></p>

<script>
var btn=document.getElementById("btn");

btn.onclick=function(){

    var n =document.getElementById("name");
    var list=document.getElementById("add").value;
    var listArray={};
    var newOption=document.createElement("option");

    listArray=n;

        newOption.className="someName";
        newOption.innerHTML=list;
        newOption.value=list;

    n.appendChild(newOption);
   }
</script>

Answer 1

There is three ( main ) way to store client side data in Javascript.
The cookies are used to store data that is accessible to the server, ex: JWT authentication token.

The other two are Session storage and local storage. I've never learn the difference between the two but here is a good question about it.

In your case, I would suggest using localStorage. It is very easy to use and will be available until clear programmatically or by the user.

You can add data to the localStorage using

window.localStorage.setItem('key', value)

and retreive it using.

window.localStorage.getItem('key')

You should only keep minimum data in the localStorage, don't store your HTML. Store only enough data to rebuild it once you need your information.