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)
(NOTE: when user have internet read and show new items )
Does anyone have a good tutorial or any helpful website?
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.
