需要读取XML并显示它并保存在本地存储上。 [英] Need read XML and show it and save on Local storage.
本文介绍了需要读取XML并显示它并保存在本地存储上。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要读取XML数据并以HTML格式显示，同时将其保存在localStorage中。
I need to read XML data and show this in HTML and at the same time save it in localStorage.
当用户为内联时，我需要使用HTML显示内容localStorage。
When the user is ofline I need show the content using localStorage.
（注意：没有PHP）
（注意：当用户有互联网阅读和展示新项目）
(NOTE: without PHP)
(NOTE: when user have internet read and show new items )
有没有人有一个好的教程或任何有用的网站？
Does anyone have a good tutorial or any helpful website?
推荐答案
我找到了这篇文章/教程。
它显示了如何解析和保存xml文件。
以及如何离线查询。
I found this article/tutorial. It shows how to parse and save a xml file. And how you can query it offline.
这是通过使用javascript完成的。
It is done by using javascript.
文章在Mantascode的mantascode.com上，描述了如何将xml文件解析为localstorage。
使用launch.html使用java脚本解析xml文件。
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>
还有一个Offline.html来查询本地存储的xml
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>
books.xml的标记
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>
文章标题：
Javascript：如何解析xml，写入html5本地存储，然后从本地存储读取，并允许用户搜索内容。
Title of article: Javascript: How to parse xml, write to html5 local storage, then read from local storage, and allow user to search content.
这篇关于需要读取XML并显示它并保存在本地存储上。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
