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

 

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