Javascript 有没有一种方法可以将我用js附加到DOM中的内容存储在本地存储中，以便在页面重新加载后检索它？

好的，为了测试的目的，假设我有一个函数，它在

中附加
元素
容器，并且我想保留我添加的所有列表项，是否有方法将它们存储在本地存储中（或任何其他方式，本地），以便每次重新加载页面时都可以检索它们

我在api中学习了一点，我没有找到一种方法来存储这样的动态元素，但是我还是一名学生，如果有什么我不知道的事情，我会认识到正确的做法来做它。有什么想法吗


var textcounter=1；
var输入计数器=1；
函数addText（）{
var div=document.getElementById（“div”）；
var texttobestored=document.createElement（“li”）；
texttobestored.id=“text”+textcounter；
texttobestored.style.color=“红色”；
texttobetored.innerHTML=“我想保留此文本”
”；
附件子项（文本待办事项）；
textcounter++；
}
函数addInputs（）{
var div=document.getElementById（“div”）；
var inputstobestored=document.createElement（“li”）；
inputstobestored.id=“input”+inputcounter；
inputstobestored.innerHTML=“”；
输入stobestored.style.color=“蓝色”；
inputstobestored.style.width=“600px”；
子类appendChild（输入到存储）；
输入计数器++；
}
#div{
宽度：600px；
}

添加文本
添加输入
这是一把小提琴：

此函数调用saveInput将数据保存到localstorage。然后它还生成
通过
loadInput
保存的输入

它只存储ID、颜色和宽度。但是使用它作为基础，您还可以保存其他字段

function saveinput(obj) {
  saved = localStorage.getItem("items") || "[]"
  saved = JSON.parse(saved)
  saved.push(obj)
  localStorage.setItem("items", JSON.stringify(saved))
}

var textcounter = 1;
var inputcounter = 1;

function addText() {
  var div = document.getElementById("div");
  var texttobestored = document.createElement("li");
  texttobestored.id = "text" + textcounter;
  texttobestored.style.color = "red";
  texttobestored.innerHTML = "<p>I WANT TO KEEP THIS TEXT</p>";
  div.appendChild(texttobestored);
  textcounter++;
}

function addInputs() {
  var div = document.getElementById("div");
  var inputstobestored = document.createElement("li");
  inputstobestored.id = "input" + inputcounter;
  inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
  inputstobestored.style.color = "blue";
  inputstobestored.style.width = "600px";

  saveinput({
    id: "input" + inputcounter,
    color: "blue",
    width: "600px"
  })

  div.appendChild(inputstobestored);
  inputcounter++;
}

function loadInput() {
  inputs = localStorage.getItem("items") || "[]"
  inputs = JSON.parse(inputs)

  inputs.forEach(function(input) {
    var div = document.getElementById("div");
    var inputstobestored = document.createElement("li");
    inputstobestored.id = input.id;
    inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
    inputstobestored.style.color = input.color;
    inputstobestored.style.width = input.width;
    div.appendChild(inputstobestored);
    inputcounter++;
  })
}

loadInput();

功能保存输入（obj）{
saved=localStorage.getItem（“项目”）||“[]”
saved=JSON.parse（已保存）
保存。推送（obj）
localStorage.setItem（“items”，JSON.stringify（已保存））
}
var textcounter=1；
var输入计数器=1；
函数addText（）{
var div=document.getElementById（“div”）；
var texttobestored=document.createElement（“li”）；
texttobestored.id=“text”+textcounter；
text tobestored.style.color=“红色”；
texttobetored.innerHTML=“我想保留此文本”
”；
附件子项（文本待办事项）；
textcounter++；
}
函数addInputs（）{
var div=document.getElementById（“div”）；
var inputstobestored=document.createElement（“li”）；
inputstobestored.id=“input”+inputcounter；
inputstobestored.innerHTML=“”；
输入stobestored.style.color=“蓝色”；
inputstobestored.style.width=“600px”；
保存输入({
id:“输入”+输入计数器，
颜色：“蓝色”，
宽度：“600px”
})
子类appendChild（输入到存储）；
输入计数器++；
}
函数loadInput（）{
inputs=localStorage.getItem（“项”）||“[]”
inputs=JSON.parse（输入）
输入。forEach（函数（输入）{
var div=document.getElementById（“div”）；
var inputstobestored=document.createElement（“li”）；
inputstobestored.id=input.id；
inputstobestored.innerHTML=“”；
inputstobestored.style.color=input.color；
inputstobestored.style.width=input.width；
子类appendChild（输入到存储）；
输入计数器++；
})
}
loadInput（）；
是的，HTML只是一个字符串，您可以使用
innerHTML
或
outerHTML
检索该字符串-您可以将该字符串保存在本地存储中。您需要意识到，在重用该字符串时，您将丢失任何以编程方式分配的事件处理程序。在这种情况下，最好将用于在localStorage中构建元素的信息存储为JSON，然后每次都重新构建它，而不是将重点放在实际存储DomeElement上。主要是因为用户可以编辑他们自己的本地存储，这将允许他们以完全权限将脚本插入到您的页面中。@somethinghere-这“允许他们以完全权限将脚本插入到您的页面中”是误导性的。如果安全地完成，当HTML被放回DOM中时，就不可能执行用户注入的JS。请参阅：
localStorage.someProperty=JSON.stringify（{listProp1:'listpalue1here'，listProp2:'listProp2Here'}）是分配的简单方法。删除类似于
localStorage.removietem（someProperty）。所以，最好将属性存储在转换为字符串的对象中，因为存储只接受字符串。顺便说一句，我建议不要用CSS做大部分（如果不是全部的话）你的风格。只要
Element.classList.add（'classNameHere'）
就可以了，而CSS已经设置好了，可以做你想做的事情。此外，我建议不要使用
.innerHTML
，除非删除多个
=''
元素。减少DOM解析。@RandyCasburn True，但如果此用户正在存储要稍后加载的元素的
outerHTML
，则没有真正安全的方法来防止这种危险的事情，这就是为什么我建议存储数据而不是html本身的原因。仍然重要的是，他们考虑这些警告和危险。