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

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

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

storage.js内容如下：

 function kset(key, value){
     console.log("key"+key+"value"+value);
     window.localStorage.setItem(key, value);
 }

 function kget(key){
     console.log(key);
     return window.localStorage.getItem(key);
 }

 function kremove(key){
     window.localStorage.removeItem(key);
 }

 function kclear(){
     window.localStorage.clear();
 }
 //测试更新方法
 function kupdate(key,value){
     window.localStorage.removeItem(key);
     window.localStorage.setItem(key, value);
 }

 

举例如下：

简单封装如下：

 //临时存储
 var TempCache = {
     cache:function(value){
         localStorage.setItem("EasyWayTempCache",value);
     },
     getCache:function(){
         return  localStorage.getItem("EasyWayTempCache");
     },
     setItem:function(key,value){
         localStorage.setItem(key,value);
     },
     getItem:function(key){
         return localStorage.getItem(key);
     },
     removeItem:function(key){
         return localStorage.removeItem(key);
     }
 };

 

 在A页面的内容：

  绑定所有workorderclass样式的div

  设置相关的页面参数：

 //绑定视图的列表的相关的信息
 function bindListView(changeData){
     $(".workorderclass").each(function(){
             $(this).click(function(){
                 //绑定订单的编号，便于在下一个页面切换时候使用
                 TempCache.setItem("order_function_mgr_id",$(this).attr("id"));

                 TempCache.setItem("order_function","serviceOrderFunction");
                 TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));
             });

     });
 }

 

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

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

     //工单展示的初始化信息
     function displayWorkOrder(){
          //绑定订单的编号，便于在下一个页面切换时候使用
          var workOrderId=TempCache.getItem("order_function_mgr_id");
          workOrderId=workOrderId.replace(/(^\s*)|(\s*$)/g,"");
          //追踪工单来源
           functionName=TempCache.getItem("order_function");
           functionName=functionName.replace(/(^\s*)|(\s*$)/g,"");

          if(workOrderId!=''){
             queryWorkOrderInfo(workOrderId,functionName);
 TempCache.removeItem("order_function_mgr_id");       }else{
             alert("服务请求失败，请稍候再试....");
          }
     }

 

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