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. function kget(key){  
6.     console.log(key);  
7.     return window.localStorage.getItem(key);  
9. function kremove(key){  
10.     window.localStorage.removeItem(key);  
12. function kclear(){  
13.     window.localStorage.clear();  
15. //測試更新方法  
16. function kupdate(key,value){  

舉例如下：

簡單封裝如下：

1. //臨時存儲  
2. var TempCache = {  
3.     cache:function(value){  
4.         localStorage.setItem("EasyWayTempCache",value);  
5.     },  
6.     getCache:function(){  
7.         return  localStorage.getItem("EasyWayTempCache");  
9.     setItem:function(key,value){  
10.         localStorage.setItem(key,value);  
12.     getItem:function(key){  
13.         return localStorage.getItem(key);  
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.                 TempCache.setItem("order_function","serviceOrderFunction");  
8.                 TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));  
9.             });  
10.     });  

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

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