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