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("服务请求失败，请稍候再试....");
}
}

JQueryMobile页面跳转参数的传递解决方案,古老的榕树,5-wow.com