如何在不删除旧文档的情况下将 XMLDocument 附加到 LocalStorage

Posted 2023-02-21

【中文标题】如何在不删除旧文档的情况下将 XMLDocument 附加到 LocalStorage

【英文标题】：How to append an XMLDocument into LocalStorage without deleting the older one

【发布时间】：2020-09-30 00:38:54

【问题描述】：

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

我想要这样的东西：

<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>

但我一次只能处理一个文档，我不能将新创建的 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);

  // ...

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

这是尝试将新 xml 附加或推送到旧 x​​ml 的代码

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);

【参考方案1】：

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

function addTodo(e) 
  // ...
  xmlDoc = parser.parseFromString(txt, "text/xml");
  localStorage.setItem("data", xmlDoc);
  // ...

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

let xmlDocs = [];
/ ...
function addTodo(e) 
  let xmlDocs = JSON.parse(localStorage.getItem('data')) || [];
  // ...
  xmlDoc = parser.parseFromString(txt, "text/xml");
  xmlDocs.push(xmlDoc);
  localStorage.setItem('data', JSON.stringify(xmlDocs));
  // ...

注意使用JSON.stringify() 将数组转换为字符串，使用JSON.parse() 将字符串转换回数组。这保证localStorage 只存储字符串（根据需要）。

【讨论】：

嗨@terrymorse 这是个好主意，但我需要使用 JSON.stringify 吗？我只想使用 XML 或 JS 而不是 JSON 来执行此操作。因为我正在开发一个面向完整的 xml 网站。非常感谢您的时间和耐心！

@Learner33 如果您尝试将不是字符串的数据存储到localStorage，那么您必须先将数据转换为字符串。执行此操作的一般方法是使用JSON.stringify。如果您的数据是 DOM 树，您也可以使用 XML serializeToString() 方法。

谢谢！所以一切都是一样的，但使用 XMLSerializer.serializeToString() 而不是 JSON.stringify()。

@Learner33 是的，但serializeToString() 仅在您的数据是 DOM 树或子树的根时才有效。对于其他数据，如 javascript 数组，它会失败。

好的...@terrymorse 因为我只使用 XML，而不是 JSON 对象。它只是一个了解如何使用 XML 数据的简单项目。再次感谢！我会尝试代码，因为这让我发疯了嘿嘿！