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

Question

我的下面的代码遇到了一些问题。我已经实现了创建一个新元素并将其添加到选项列表中。现在，每当我刷新页面时，新元素就会从列表中消失。我不熟悉 cookie 或 session 在 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 身份验证 token 。

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

就您而言，我建议使用localStorage。它非常易于使用，并且在以编程方式或由用户清除之前都可用。

您可以使用

将数据添加到 localStorage

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

并使用它检索它。

window.localStorage.getItem('key')

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