HTML5动移开发之路jQueryMobile页面间参数传递.docx

HTML5移动开发之路 jQueryMobile页面间参数传递在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页模版中不需要与服务器进行通信，通常在多页模版中有以下三种方法来实现页面间的参数传递。1、GET方式：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。2、通过HTML5的Web Storage进行参数传递。3、建立当前页面变量，在前一个页面将所需传递的参数内容赋值到变量中，在后一个页面从变量中将参数取出来。（程序灵活性较弱）一、以GET方式实现页面间参数传递?view sourceprint?01.!DOCTYPE html02.html03.head04.title练习/title05.meta charset=utf-8?/06.meta name=viewport?content=width=device-width,07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0; /08.link href=css/jquery.mobile-1.0.1.min.css09.rel=stylesheet?type=text/css/10.script src=js/jquery-1.6.4.js11.type=text/javascript?/script12.script src=js/jquery.mobile-1.0.1.js??type=text/javascript?/script13.script type=text/javascript14.functiongetParameterByName(name){15.var match = RegExp([?]?+ name +?=([^]*)).exec(window.location.search);16.return?match decodeURIComponent(match[1].replace(/+/g,? ));17.}18.$(#page_Parameter1).live(pageshow,? function(event, ui){19.alert(第二个页面的参数：?+ getParameterByName(parameter));20.});21./script22./head23.body24.section id=page_Parameter0?data-role=page25.header data-role=header26.h3页面参数传值/h327./header28.div?class=content?data-role=content29.p传递参数进入下一页，以Alert方式显示参数内容。br/30.传递参数进入a href=?parameter=4321#page_Parameter1?rel=external下一页/abr/31./p32./div33./section34.section id=page_Parameter1?data-role=page35.header data-role=header36.h3页面参数传递/h337./header38.div?class=content?data-role=content39.p通过Alert显示前一个界面参数。br/40.a href=#page_Parameter0返回/a/p41./div42./section43./body44./html?注意：要注明访问的页面形式为外部链接形式rel=external,否则页面间参数传递无法正常执行。二、通过HTML5 Web Storage特性实现参数传递通常包含两部分，sessionStorage是将存储内容以会话的形式存储在浏览器中，由于是会话级别的存储，当浏览器关闭之后，sessionStorage中的内容会全部消失。localStorage是基于持久化的存储，类似于传统HTML开发中cookie的使用，除非主动删除localStorage中的内容，否则将不会删除。检查浏览器支持Web Storage特性：?view sourceprint?01.!DOCTYPE html02.html03.head04.title练习/title05.meta charset=utf-8?/06.meta name=viewport?content=width=device-width,07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0; /08.link href=css/jquery.mobile-1.0.1.min.css09.rel=sty