我应该如何在 JavaScript 中存储新创建的元素？

Question

我在下面的代码中遇到了一些问题。我已经实现了创建一个新元素并将其添加到选项列表中。现在，每当我刷新页面时，新元素都会从列表中消失。我不熟悉 cookie 或会话在 JavaScript 中的工作方式。但是我如何存储这些元素以及每当我创建一个新元素时，即使在刷新后也能够在选项列表中。对不起我的英语，并提前感谢您的帮助。如您所见，我的代码如下。

    <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

在 Javascript 中存储客户端数据有三种（主要）方式。
cookie 用于存储服务器可访问的数据，例如：JWT 身份验证令牌。

另外两个是Session存储和本地存储。我从来没有了解这两者之间的区别，但here 是一个很好的问题。

在你的情况下，我建议使用localStorage。它非常易于使用，并且在以编程方式或由用户清除之前一直可用。

您可以使用

将数据添加到 localStorage

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

并使用它来检索它。

window.localStorage.getItem('key')

您应该只在localStorage 中保留最少的数据，不要存储您的 HTML。仅存储足够的数据以在您需要信息时重建它。