在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("服务请求失败,请稍候再试....");
- }
- }
如有不懂的地方,欢迎沟通谢谢!