萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数。在多页模板，并且不需要server沟通，通常有三种方式在多页模板来实现页面之间的参数传递。
1、GET道路：上一页页生成参数并传递到下一个页面，然后在下一个页GET内容分析。
2、通过HTML5的Web Storage进行參数传递。
3、建立当前页面变量。在前一个页面将所需传递的參数内容赋值到变量中。在后一个页面从变量中将參数取出来。（程序灵活性较弱）
一、以GET方式实现页面间參数传递
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function getParameterByName(name){
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
$('#page_Parameter1').live('pageshow', function(event, ui){
alert("第二个页面的參数：" + getParameterByName('parameter'));
});
</script>
</head>
<body>
<section id="page_Parameter0" data-role="page">
<header data-role="header">
<h1>页面參数传值</h1>
</header>
<div class="content" data-role="content">
<p>传递參数进入下一页。以Alert方式显示參数内容。<br/>
传递參数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>
</p>
</div>
</section>
<section id="page_Parameter1" data-role="page">
<header data-role="header">
<h1>页面參数传递</h1>
</header>
<div class="content" data-role="content">
<p>通过Alert显示前一个界面參数。<br/>
<a href="#page_Parameter0">返回</a></p>
</div>
</section>
</body>
</html>
注意：要注明訪问的页面形式为外部链接形式rel="external",否则页面间參数传递无法正常运行。
二、通过HTML5 Web Storage特性实现參数传递
通常包括两部分，sessionStorage是将存储内容以会话的形式存储在浏览器中，由于是会话级别的存储。当浏览器关闭之后。sessionStorage中的内容会所有消失。localStorage是基于持久化的存储，相似于传统HTML开发中cookie的使用，除非主动删除localStorage中的内容，否则将不会删除。
检查浏览器支持Web Storage特性：
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript">
if(window.localStorage){
alert("浏览器支持localStorage");
}else{
alert("浏览器暂不支持localStorage");
}
if(window.sessionStorage){
alert("浏览器支持sessionStorage");
}else{
alert("浏览器暂不支持sessionStorage")
}
</script>
</body>
</html>
通常。在jQuery Mobile中实现页面间參数传递时，我们不使用localStorage而是使用sessionStorage,由于不必持久化在本地。
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$('#page_Parameter1').live('pageshow', function(event, ui){
alert("第二个界面的參数：" + sessionStorage.id);
});
</script>
</head>
<body>
<section id="page_Parameter0" data-role="page">
<header data-role="header">
<h1>页面參数传递</h1>
</header>
<div class="content" data-role="content">
<p>传递參数进入下一页，以Alert方式显示參数内容。<br/>
传递參数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>
</p>
</div>
</section>
<section id="page_Parameter1" data-role="page">
<header data-role="header">
<h1>页面參数传递</h1>
</header>
<div class="content" data-role="content">
<p>通过Alert显示来自前一个界面的參数。<br/>
<a href="#page_Parameter0">返回</a>
</p>
</div>
</section>
</body>
</html>
版权声明：本文博客原创文章，博客，未经同意，不得转载。