本地存储推送 XML 对象

Posted 2023-02-21

【中文标题】本地存储推送 XML 对象

【英文标题】：Local Storage push XML Object

【发布时间】：2020-09-28 12:01:44

【问题描述】：

我有一个 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 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>

【问题讨论】：

先获取旧的（存储的）一个，然后用新的 xml 更新旧的。获取项目存储在使用 localStorage localStorage.getItem('data');

@SameerKhan 谢谢，如果你介意的话，你能解释一下如何发展你所说的吗？谢谢！

请注意，localStorage 只存储 string 值。因此，在将 XML 存储到 localStorage 之前对其进行解析是徒劳的。您应该将字符串存储在 localStorage 中，并在离开 localStorage 时对其进行解析。

userInput 来自哪里？

@HereticMonkey 来自表单

【参考方案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;

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