Need read XML and show it and save on Local storage.

前端未结

关注

 1  701

说谎

I need to read XML data and show this in HTML and at the same time save it in localStorage.

When the user is ofline I need show the content using localStorage.

相关标签:

1条回答

眼角桃花

2021-01-07 12:42

I found this article/tutorial. It shows how to parse and save a xml file. And how you can query it offline.

It is done by using javascript.

Article is on mantascode.com by Mantascode and describes how to parse a xml file to localstorage. using a launch.html to parse xml file using java script.

    <!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>

And a Offline.html to query the local stored 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>

Markup of 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

Title of article: Javascript: How to parse xml, write to html5 local storage, then read from local storage, and allow user to search content.

0 讨论(0)