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

}

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