[本地存储推送XML对象

Question

我有一个JS代码，它创建一个XML并将其解析在本地存储上。问题是我无法将更多XML附加到本地存储中。下面的示例。

<?xml version="1.0" encoding="UTF-8"?>
<club>
     <movie>
           <title> I Love Programming </title>
           <genre> Action </genre>
           <dir> Brian De Palma </dir>
           <year> 1900 </year>
     </movie>
</club>

我将上面的代码保存到本地存储中，但是如果我想保存更多相同的XML，它会创建另一个XML文件，并插入将其推送到现有文件上。

function addXMLtoLocalStorage(e){
txt1 = `<?xml version="1.0" encoding="UTF-8"?>`

        txt2 = `<club>`
        txt3 = `<movie>`
        txt4 = `<title>` +  userInput[0] + `</title>` 
        txt5 = `<genre>` +  userInput[1] + `</genre>` 
        txt6 = `<dir>` +  userInput[2] + `</dir>` 
        txt7 = `<year>` +  userInput[3] + `</year>` 
        txt8 = `</movie>`
        txt9 = `</club>`
        txt=txt1+txt2+txt3+txt4+txt5+txt6+txt7+txt8+txt9;  
        console.log(txt);




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

每次运行新生成的XML函数时，如何将其附加到第一个XML文件中，以便每次创建新的XML？

预期输出

<?xml version="1.0" encoding="UTF-8"?>
<club>
     <movie>
           <title> I Love Programming </title>
           <genre> Action </genre>
           <dir> Brian De Palma </dir>
           <year> 1900 </year>
     </movie>
</club>
<!--Now add the following info below, not creating a new XML file.-->
<club>
     <movie>
           <title> I Love Programming The Sequel </title>
           <genre> Action </genre>
           <dir> Brian De Palma </dir>
           <year> 1920 </year>
     </movie>
</club>
<!-- Every new Club instance is when the function above is runned -->
<club>
     <movie>
           <title> Help! Me </title>
           <genre> Thriller </genre>
           <dir> Spielberg </dir>
           <year> 2020 </year>
     </movie>
</club>

Answer 1

const title = document.querySelector('#title');
const genre = document.querySelector('#genre');
const director = document.querySelector('#director');
const year = document.querySelector('#year');
const xmlContainer = document.querySelector('#xml-container');

(function displayXml() {
	let data = localStorage.getItem('data');
  if (data) {
    parser = new DOMParser();
    xmlDoc=parser.parseFromString(data,"text/xml");
    xmlContainer.append(xmlDoc.documentElement);
  }
}())

function addXMLtoLocalStorage() {
	let data = localStorage.getItem('data');
  
  let newXmlData = `
  		<club>
        <movie>
          <title>${title.value}</title>
          <genre>${genre.value}</genre>
          <dir>${director.value}</dir>
          <year>${year.value}</year>
        </movie>
    	</club>
  `
  
  if (!data) {
  	data = "";
    data = `<?xml version="1.0" encoding="UTF-8"?>` + newXmlData;
  } else {
  	data += newXmlData;
  }
  localStorage.setItem('data', data);
  parser = new DOMParser();
  xmlDoc=parser.parseFromString(data,"text/xml");
  console.log(data);
  xmlContainer.append(xmlDoc.documentElement);
  title.value = genre.value = director.value = year.value = null;
}

<input type="text" placeholder="Title" id="title">
<input type="text" placeholder="genre" id="genre">
<input type="text" placeholder="Director" id="director">
<input type="number" placeholder="Year" id="year">
<button onclick="addXMLtoLocalStorage()">Add</button>
<div id="xml-container"></div>

一些详细信息

您可以使用模板文字${}。${What you write in between of these, is treated as variables}

获取保存数据let data = localStorage.getItem('data');并将新创建的xml附加为data += newXmlData;

由于某些原因，stackoverflow的运行编辑器无法正常工作，请查看JSFiddle