JQueryMobile頁面跳轉參數的傳遞解決方案

在JQueryMobile開發手機端應用使用可能須要考慮相關的頁面跳轉帶來的參數問題。由於JQueryMobile其實也是HTML5實踐的結果。 HTML5中有localStorage和sessionStorage使用。最好採用Storage實現比較簡單易用。

例如在頁面A跳轉B頁面，在A跳轉前將跳轉參數注入到localStorage中，在B頁面初始化獲取localStorage相關的頁面參數。並作相應的處理同時在適當的頁面清理頁面參數。

storage.js內容以下：
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);
}



舉例以下：

簡單封裝以下：
Js代碼
//臨時存儲
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

設置相關的頁面參數：
Java代碼
//綁定視圖的列表的相關的信息
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、。
Js代碼
//工單展現的初始化信息
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("服務請求失敗，請稍候再試....");
}
}