Javascript 如何将XMLDocument附加到LocalStorage中而不删除旧文档

我现在有一个问题： 我有一个js代码，它创建了一个简单的XML文档。问题是，当我重新运行创建文档的函数时，它会将旧的替换为新的

我想要这样的东西：

<root>
     <person>
            <name>Jon</name>
            <age>18</age>

     </person>
     <person>
            <name>Paco</name>
            <age>76</age>

     </person>
     <person>
            <name>Marta</name>
            <age>42</age>

     </person>


</root>

乔恩
18
帕科
76
玛尔塔
42

但我一次只能处理一个文档，不能将新创建的xml文档“附加或推送”到第一个文档中。本地存储总是存储最新的数据。 我的JS代码

用户输入来自表单标记

function addTodo(e) {
  e.preventDefault();
  const userInputHTMLCollection = document.getElementsByClassName("userAdd");
  console.log(userInputHTMLCollection);

  // EDITOR: added missing '=' below:
  const userInput = [].map.call(
    userInputHTMLCollection,
    (element) => element.value
  );
  console.log(userInput[0]);
  console.log(userInput[1]);
  console.log(userInput[2]);
  console.log(userInput[3]);

  //Creem la plantilla XML.

  txt1 = `<?xml version="1.0" encoding="UTF-8"?>`;

  txt2 = `<filmoteca>`;
  txt3 = `<peli>`;
  txt4 = `<titol>` + userInput[0] + `</titol>`;
  txt5 = `<genere>` + userInput[1] + `</genere>`;
  txt6 = `<director>` + userInput[2] + `</director>`;
  txt7 = `<any>` + userInput[3] + `</any>`;
  txt8 = `</peli>`;
  txt9 = `</filmoteca>`;
  txt = txt1 + txt2 + txt3 + txt4 + txt5 + txt6 + txt7 + txt8 + txt9;
  console.log("Text Principal" + txt);

  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
  localStorage.setItem("data", xmlDoc);
  console.log(xmlDoc);

  var xmlString = new XMLSerializer().serializeToString(xmlDoc);
  console.log(xmlString);

  // ...
}

函数addTodo（e）{
e、 预防默认值（）；
const userinputtmlcollection=document.getElementsByClassName（“userAdd”）；
log（userinputtmlcollection）；
//编辑器：在下面添加了缺少的“=”：
const userInput=[].map.call(
UserInPurtMLCollection，
（元素）=>element.value
);
console.log（userInput[0]）；
console.log（userInput[1]）；
log（userInput[2]）；
log（userInput[3]）；
//Creem la plantilla XML。
txt1=`；
txt2=`；
txt3=`；
txt4=`+userInput[0]+`；
txt5=`+userInput[1]+`；
txt6=`+userInput[2]+`；
txt7=`+userInput[3]+`；
txt8=`；
txt9=`；
txt=txt1+txt2+txt3+txt4+txt5+txt6+txt7+txt8+txt9；
console.log（“文本主体”+txt）；
parser=新的DOMParser（）；
xmlDoc=parser.parseFromString（txt，“text/xml”）；
setItem（“数据”，xmlDoc）；
console.log（xmlDoc）；
var xmlString=新的XMLSerializer（）.serializeToString（xmlDoc）；
log（xmlString）；
// ...
}

下面的函数将在LocalStorage中创建一个XMLDocument，但我希望继续添加更多

下面是试图将新xml追加或推送到旧xml中的代码

function afegirLS() {
  const userInputHTMLCollection = document.getElementsByClassName("userAdd");

  const userInput = [].map.call(
    userInputHTMLCollection,
    (element) => element.value
  );

  var informacio = localStorage.getItem("data");

  txt2 = `<filmoteca>`;
  txt3 = `<peli>`;
  txt4 = `<titol>` + userInput[0] + `</titol>`;
  txt5 = `<genere>` + userInput[1] + `</genere>`;
  txt6 = `<director>` + userInput[2] + `</director>`;
  txt7 = `<any>` + userInput[3] + `</any>`;
  txt8 = `</peli>`;
  txt9 = `</filmoteca>`;
  txt_nou = txt1 + txt2 + txt3 + txt4 + txt5 + txt6 + txt7 + txt8 + txt9;
  console.log("Text Nou" + txt_nou);

  parser2 = new DOMParser();
  afegirXML = parser2.parseFromString(txt_nou, "text/xml");

  console.log(afegirXML);
  //var xmlString2 = new XMLSerializer().serializeToString(string_vell);
  //console.log(xmlString2);

  //txt_nou.push(xmlString);
}

函数afegirLS（）{ const userinputtmlcollection=document.getElementsByClassName（“userAdd”）； const userInput=[].map.call( UserInPurtMLCollection， （元素）=>element.value ); var informacio=localStorage.getItem（“数据”）； txt2=`； txt3=`； txt4=`+userInput[0]+`； txt5=`+userInput[1]+`； txt6=`+userInput[2]+`； txt7=`+userInput[3]+`； txt8=`； txt9=`； txt_nou=txt1+txt2+txt3+txt4+txt5+txt6+txt7+txt8+txt9； console.log（“文本Nou”+txt_Nou）； parser2=新的DOMParser（）； afegirXML=parser2.parseFromString（txt_nou，“text/xml”）； log（afegirXML）； //var xmlString2=新的XMLSerializer（）.serializeToString（字符串水平）； //console.log（xmlString2）； //txt_nou.push（xmlString）； }

---

您似乎想将多个XML文档存储到localStorage中，但只存储一个文档

函数addTodo（e）{
// ...
xmlDoc=parser.parseFromString（txt，“text/xml”）；
setItem（“数据”，xmlDoc）；
// ...
}

如果要存储多个文档，可以存储和检索一个数组

让xmlDocs=[]；
/ ...
函数addTodo（e）{
让xmlDocs=JSON.parse（localStorage.getItem（'data'））| |[]；
// ...
xmlDoc=parser.parseFromString（txt，“text/xml”）；
push（xmlDoc）；
setItem（'data'，JSON.stringify（xmlDocs））；
// ...
}

---

注意使用

JSON.stringify（）

将数组转换为字符串，使用

JSON.parse（）

将字符串转换回数组。这保证了

localStorage

只存储字符串（根据需要）。

Hi@terrymorse这是个好主意，但是我需要使用JSON.stringify吗？我只想用XML或JS而不是JSON来实现这一点。因为我正在开发一个全方位的xml网站。非常感谢您的时间和耐心@学习者33如果您试图将非字符串的数据存储到

localStorage

，则必须先将数据转换为字符串。实现这一点的一般方法是使用

JSON.stringify

。如果您的数据是DOM树，您也可以使用XML方法。谢谢！因此，这一切都是一样的，只是使用了XMLSerializer.serializeToString（）而不是JSON.stringify（）。@Learner33是的，但是

serializeToString（）

仅当数据是DOM树或子树的根时才起作用。对于其他数据，比如JavaScript数组，它会失败@terrymorse，因为我只处理XML，而不是JSON对象。了解如何使用XML数据只是一个简单的项目。再次感谢！我要试试密码，因为这让我发疯了呵呵！