在單頁模版中使用基於HTTP的方式透過POST和GET請求傳遞參數，而在多頁模版中不需要與伺服器進行通信，通常在多頁模版中有以下三種方法來實現頁間的參數傳遞。
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>
<p class="content" data-role="content">
<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>
传递参数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>
</p>
</p>
</section>
<section id="page_Parameter1" data-role="page">
<header data-role="header">
<h1>页面参数传递</h1>
</header>
<p class="content" data-role="content">
<p>通过Alert显示前一个界面参数。<br/>
<a href="#page_Parameter0">返回</a></p>
</p>
</section>
</body>
</html>
二、透過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>
<p class="content" data-role="content">
<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>
传递参数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>
</p>
</p>
</section>
<section id="page_Parameter1" data-role="page">
<header data-role="header">
<h1>页面参数传递</h1>
</header>
<p class="content" data-role="content">
<p>通过Alert显示来自前一个界面的参数。<br/>
<a href="#page_Parameter0">返回</a>
</p>
</p>
</section>
</body>
</html>以上就是小強的HTML5行動開發之路（53）－jQueryMobile頁間參數傳遞 的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
