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