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.     }  

 


http://topmanopensource.iteye.com/blog/1532476

posted @ 2012-11-19 11:54  y0umer  阅读(3152)  评论(0)    收藏  举报