JQueryMobile页面跳转参数的传递解决方案

在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题。因为JQueryMobile其实也是HTML5实践的结果。HTML5中有localStorage和sessionStorage使用。最好采用Storage实现比较简单易用。

例如在页面A跳转B页面，在A跳转前将跳转参数注入到localStorage中，在B页面初始化获取localStorage相关的页面参数。并做相应的处理同时在适当的页面清理页面参数。

storage.js内容如下：

1. function kset(key, value){
2. console.log("key"+key+"value"+value);
3. window.localStorage.setItem(key, value);
4. }
5. function kget(key){
6. console.log(key);
7. return window.localStorage.getItem(key);
8. }
9. function kremove(key){
10. window.localStorage.removeItem(key);
11. }
12. function kclear(){
13. window.localStorage.clear();
14. }
15. //测试更新方法
16. function kupdate(key,value){
17. window.localStorage.removeItem(key);
18. window.localStorage.setItem(key, value);
19. }

举例如下：

简单封装如下：

1. //临时存储
2. var TempCache = {
3. cache:function(value){
4. localStorage.setItem("EasyWayTempCache",value);
5. },
6. getCache:function(){
7. return  localStorage.getItem("EasyWayTempCache");
8. },
9. setItem:function(key,value){
10. localStorage.setItem(key,value);
11. },
12. getItem:function(key){
13. return localStorage.getItem(key);
14. },
15. removeItem:function(key){
16. return localStorage.removeItem(key);
17. }
18. };

在A页面的内容：

绑定所有workorderclass样式的div

设置相关的页面参数：

1. //绑定视图的列表的相关的信息
2. function bindListView(changeData){
3. $(".workorderclass").each(function(){
4. $(this).click(function(){
5. //绑定订单的编号，便于在下一个页面切换时候使用
6. TempCache.setItem("order_function_mgr_id",$(this).attr("id"));
7. TempCache.setItem("order_function","serviceOrderFunction");
8. TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));
9. });
10. });
11. }

在页面B的初始化方法中：

使用并适时清空页面的storage、。

1. //工单展示的初始化信息
2. function displayWorkOrder(){
3. //绑定订单的编号，便于在下一个页面切换时候使用
4. var workOrderId=TempCache.getItem("order_function_mgr_id");
5. workOrderId=workOrderId.replace(/(^\s*)|(\s*$)/g,"");
6. //追踪工单来源
7. functionName=TempCache.getItem("order_function");
8. functionName=functionName.replace(/(^\s*)|(\s*$)/g,"");
9. if(workOrderId!=''){
10. queryWorkOrderInfo(workOrderId,functionName);
11. TempCache.removeItem("order_function_mgr_id");       }else{
12. alert("服务请求失败，请稍候再试....");
13. }
14. }

如有不懂的地方，欢迎沟通谢谢！