Need Read Xml And Show It And Save On Local Storage.
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. (NOTE: without PHP)
Solution 1:
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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-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 /><ahref="books.xml">books.xml</a><br /><ahref="OFFLINE.html">OFFLINE.html</a><scripttype="text/javascript">if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=newXMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=newActiveXObject("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 rowif (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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-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 /><formaction="OFFLINE.html"method="get">
Search By Author : <inputtype="text"name="txtA" /><br /><inputtype="submit"value="Submit" /></form><br /><br /><divid="results_ID"></div><scripttype="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=newDOMParser();
xmlDoc=parser.parseFromString(localStorageRow,"text/xml");
}
else// Internet Explorer
{
xmlDoc=newActiveXObject("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(newRegExp(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 functionfunctiongetUrlVars() {
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><bookid="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.
Post a Comment for "Need Read Xml And Show It And Save On Local Storage."