1

我需要读取 XML 数据并在 HTML 中显示它，同时将其保存在 localStorage 中。

当用户离线时，我需要使用 localStorage 显示内容。

（注意：没有 PHP）
（注意： 当用户有互联网阅读并显示新项目时）

有没有人有好的教程或任何有用的网站？

4

1 回答 1

3

我找到了这篇文章/教程。它展示了如何解析和保存 xml 文件。以及如何离线查询。

它是通过使用 javascript 完成的。

文章由 Mantascode 在 mantascode.com 上发表，描述了如何将 xml 文件解析到本地存储。使用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>

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

在这里你会找到这篇文章

文章标题：Javascript：如何解析xml，写入html5本地存储，然后从本地存储读取，并允许用户搜索内容。

于 2012-06-30T07:03:38.287 回答