JQueryMobile页面跳转参数的传递解决方案

            在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题。因为JQueryMobile其实也是HTML5实践的结果。HTML5中有localStorage和sessionStorage使用。最好采用Storage实现比较简单易用。

例如在页面A跳转B页面，在A跳转前将跳转参数注入到localStorage中，在B页面初始化获取localStorage相关的页面参数。并做相应的处理同时在适当的页面清理页面参数。

storage.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);
}

 

举例如下：

简单封装如下：

//临时存储
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

  设置相关的页面参数：

		//绑定视图的列表的相关的信息
		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、。

	//工单展示的初始化信息
	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("服务请求失败，请稍候再试....");
		 }
	}

 

如有不懂的地方，欢迎沟通谢谢！

评论

1 楼 thflove99 2014-07-11  

能否写一个示范代码，两个页面间传递参数的？我现在就是想这样做，一个页面的form表单提交了数据以后，这个表单提交的数据，比如用户名和密码一起传递到第二个页面，然后第二个页面接受这些参数并进行处理。

我用的changpage方法，不过不知道怎么接受。。。
如可以，请发我邮箱，[e-mail] 谢谢