本地存储推送 XML Object

Question

我有一个 JS 代码，它创建一个 XML 并在本地存储上解析它。 问题是我不能 append 更多 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);
}

How can I append everytime i run the function the newly generated XML into the first XML File, insted of creating a new everytime?

预期 output

<?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');
和 append 新创建的 xml 为
data += newXmlData;

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