javascript - 我应该如何在 JavaScript 中存储新创建的元素?
问题描述
我在下面的代码中遇到了一些问题。我已经实现了创建一个新元素并将其添加到选项列表中。现在,每当我刷新页面时,新元素都会从列表中消失。我不熟悉 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>
解决方案
在 Javascript 中存储客户端数据有三种(主要)方式。
cookie 用于存储服务器可访问的数据,例如:JWT 身份验证令牌。
另外两个是Session存储和本地存储。我从来没有了解两者之间的区别,但这是一个很好的问题。
在您的情况下,我建议使用localStorage
. 它非常易于使用,并且在以编程方式或由用户清除之前一直可用。
您可以将数据添加到localStorage
using
window.localStorage.setItem('key', value)
并使用它来检索它。
window.localStorage.getItem('key')
您应该只在 中保留最少的数据localStorage
,不要存储您的 HTML。只存储足够的数据以在需要信息时重建它。