This simple example will demonstrate how to use javascript to write to, and read from, html5 local storage.

The file being parsed and saved is books.xml. There are two html pages here, LAUNCH.html and OFFLINE.html.

LAUNCH.html will parse the xml file and write it to the user’s browser:

OFFLINE.html will allow the user to search the content of their local storage

LAUNCH.html

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