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

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

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

storage.js内容如下：

Js代码  

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

 

举例如下：

简单封装如下：

Js代码  

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

  设置相关的页面参数：

Java代码  

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.                   
8.                 TempCache.setItem("order_function","serviceOrderFunction");  
9.                 TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));  
10.             });  
11.              
12.     });  
13. }  

 

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

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

Js代码  

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.             
10.          if(workOrderId!=''){  
11.             queryWorkOrderInfo(workOrderId,functionName);  
12. TempCache.removeItem("order_function_mgr_id");       }else{  
13.             alert("服务请求失败，请稍候再试....");  
14.          }  
15.     }