需要閱讀XML並將其顯示並保存到本地存儲。

我需要讀取XML數據並以HTML格式顯示，同時將其保存在localStorage中。需要閱讀XML並將其顯示並保存到本地存儲。

當用戶在線時，我需要使用localStorage顯示內容。

（注：無PHP）
（注：當用戶有上網閱讀並顯示新項目）

有沒有人有一個很好的教程或任何有幫助的網站？

來源

2012-06-01 manKeKe

你提到PHP。如果這個問題涉及到PHP，你應該刪除rss標籤並添加php標籤。 –

你需要幫助在瀏覽器中將XML轉換爲HTML嗎？你需要幫助在localStorage中存儲XML數據嗎？你需要幫助確定何時使用localStorage以及什麼時候「在線」工作？哪三個你想要一個教程？ –

我需要在html withow php中顯示xml，並將其保存在本地存儲中 – manKeKe

我發現這篇文章/教程。它顯示如何解析和保存xml文件。以及如何離線查詢。

它通過使用JavaScript來完成。

文章位於mantascode.com上，由Mantascode介紹瞭如何將xml文件解析爲localstorage。使用launch.html使用java腳本解析xml文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 

This page will parse and save books.xml into the users browser<br /> 
specifically into html5 localStorage<br /> 
The xml file being pushed is called books.xml<br /> 
<br /> 
<a href="books.xml">books.xml</a> 
<br /> 
<a href="OFFLINE.html">OFFLINE.html</a> 


<script type="text/javascript"> 

if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.open("GET","books.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 

var xmlRowString = ""; 

for (var i = 0; i < xmlDoc.documentElement.childNodes.length; i++) 
{ 
if (xmlDoc.documentElement.childNodes[i].nodeName == 'book') 
{ 
for (var k = 0 ; k < xmlDoc.documentElement.childNodes[i].childNodes.length; k++) 
{ 
if (xmlDoc.documentElement.childNodes[i].childNodes[k].nodeName == 'author') 
{ 
xmlRowString += "<book><author>"+xmlDoc.documentElement.childNodes[i].childNodes[k].textContent+"</author>"; 
} 
if (xmlDoc.documentElement.childNodes[i].childNodes[k].nodeName == 'title') 
{ 
xmlRowString += "<title>"+xmlDoc.documentElement.childNodes[i].childNodes[k].textContent+"</title>"; 
} 
if (xmlDoc.documentElement.childNodes[i].childNodes[k].nodeName == 'description') 
{ 
xmlRowString += "<description>"+xmlDoc.documentElement.childNodes[i].childNodes[k].textContent+"</description></book>"; 
} 
} 
} 
if (xmlRowString === "") 
{ 
} 
else 
{ 
//Here for each book we populate a local stoage row 
if (typeof(localStorage) == 'undefined') 
{ 
alert('Your browser does not support HTML5 localStorage. Try upgrading.'); 
} 
else 
{ 
try       
{ 
localStorage.setItem(i, xmlRowString); 
} 
catch (e) 
{ 
alert("save failed!"); 
if (e == QUOTA_EXCEEDED_ERR) 
{ 
alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error 
} 
} 
} 
xmlRowString = ""; 
} 
} 

</script> 

</body> 
</html>

而一個Offline.html查詢本地存儲的XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Search local storage</title> 
</head> 

<body> 

This page will allow the user to search the content saved in your local storage.<br /> 
Search By Author name, results will be returned by book title.<br /> 


<form action="OFFLINE.html" method="get"> 
    Search By Author : <input type="text" name="txtA" /><br /> 
    <input type="submit" value="Submit" /> 
</form> 
<br /> 
<br /> 


<div id="results_ID"></div> 

<script type="text/javascript"> 

var localStorageRow = localStorage.getItem(localStorage.key(i)) ; 

var author_query = getUrlVars()["txtA"]; 

if (typeof(author_query) == "undefined" || author_query === "") 
{ 
} 
else 
{ 
for (var i = 0 ; i < localStorage.length; i++) 
{ 
var localStorageRow = localStorage.getItem(localStorage.key(i)) ; 

if (window.DOMParser) 
{ 
parser=new DOMParser(); 
xmlDoc=parser.parseFromString(localStorageRow,"text/xml"); 
} 
else // Internet Explorer 
{ 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async=false; 
xmlDoc.loadXML(localStorageRow); 
} 

for (var k = 0 ; k < xmlDoc.firstChild.childNodes.length ; k++) 
{ 
if (xmlDoc.firstChild.childNodes[k].nodeName === "author") 
{ 

var auth_row = xmlDoc.firstChild.childNodes[k].textContent;   
var authMatch = auth_row.match(new RegExp(author_query, "i")); 
if (authMatch) 
{ 
//CANNOT USE XPATH(a lot of browsers dont support this) 
//YOU HAVE TO LOOP THOUGH ELEMENTS (again) TO GET TITLE 
/* 
var nodesSnapshot = document.evaluate('//title', xmlDoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
for (var q=0 ; q < nodesSnapshot.snapshotLength; q++) 
{ 
document.getElementById("results_ID").innerHTML += nodesSnapshot.snapshotItem(q).textContent+"<br />"; 
} 
*/ 

for (var p = 0 ; p < xmlDoc.firstChild.childNodes.length ; p ++) 
{ 
if (xmlDoc.firstChild.childNodes[p].nodeName == 'title') 
{ 
document.getElementById("results_ID").innerHTML += xmlDoc.firstChild.childNodes[p].textContent+"<br />"; 
} 
} 

} 
} 
} 
} 
} 

//GET URL VARS function 
function getUrlVars() { 
var vars = {}; 
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
vars[key] = value; 
}); 
return vars; 
} 

</script> 

</body> 
</html>

標記的books.xml

<?xml version="1.0"?> 
<catalog> 
    <book id="bk101"> 
     <author>Gambardella, Matthew</author> 
     <title>XML Developer's Guide</title> 
     <genre>Computer</genre> 
     <price>44.95</price> 
     <publish_date>2000-10-01</publish_date> 
     <description>An in-depth look at creating applications 
     with XML.</description> 
    </book> 
</catalog>

Here you will find the article

標題文章的：的Javascript：如何解析xml，寫入html5本地存儲，然後從本地存儲讀取e，並允許用戶搜索內容。

來源

2012-06-30 07:03:38

一旦鏈接失效，您的回答將幾乎無用。發佈您在文章中找到的一些實際信息，或者至少提及標題和作者，以便它可以在不同的位置找到。 – toniedzwiedz

增加了html和books.xml。閱讀文章使用鏈接獲取更多信息。這不是我的代碼，積分轉到mantascode上mantascode.com –

需要閱讀XML並將其顯示並保存到本地存儲。

回答

相關問題