小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

百变鹏仔 2个月前 (10-19) #H5教程

文章标签之路

在单页模版中使用基于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(&#39;[?&]&#39; + name + &#39;=([^&]*)&#39;).exec(window.location.search);	return match && decodeURIComponent(match[1].replace(/\+/g, &#39; &#39;));}$(&#39;#page_Parameter1&#39;).live(&#39;pageshow&#39;,  function(event, ui){	alert("第二个页面的参数：" + getParameterByName(&#39;parameter&#39;));});</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>

注意：要注明访问的页面形式为外部链接形式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">$(&#39;#page_Parameter1&#39;).live(&#39;pageshow&#39;, 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页面间参数传递

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集