博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQueryMobile页面跳转参数的传递解决方案
阅读量:5462 次
发布时间:2019-06-16

本文共 1987 字,大约阅读时间需要 6 分钟。

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

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

storage.js内容如下:

Js代码  
  1. function kset(key, value){  
  2.     console.log("key"+key+"value"+value);  
  3.     window.localStorage.setItem(key, value);  
  4. }  
  5.   
  6. function kget(key){  
  7.     console.log(key);  
  8.     return window.localStorage.getItem(key);  
  9. }  
  10.   
  11. function kremove(key){  
  12.     window.localStorage.removeItem(key);  
  13. }  
  14.   
  15. function kclear(){  
  16.     window.localStorage.clear();  
  17. }  
  18. //测试更新方法  
  19. function kupdate(key,value){  
  20.     window.localStorage.removeItem(key);  
  21.     window.localStorage.setItem(key, value);  
  22. }  

 

举例如下:

简单封装如下:

Js代码  
  1. //临时存储  
  2. var TempCache = {  
  3.     cache:function(value){  
  4.         localStorage.setItem("EasyWayTempCache",value);  
  5.     },  
  6.     getCache:function(){  
  7.         return  localStorage.getItem("EasyWayTempCache");  
  8.     },  
  9.     setItem:function(key,value){  
  10.         localStorage.setItem(key,value);  
  11.     },  
  12.     getItem:function(key){  
  13.         return localStorage.getItem(key);  
  14.     },  
  15.     removeItem:function(key){  
  16.         return localStorage.removeItem(key);  
  17.     }  
  18. };  

 

 在A页面的内容:

  绑定所有workorderclass样式的div

  设置相关的页面参数:

Java代码  
  1. //绑定视图的列表的相关的信息  
  2. function bindListView(changeData){  
  3.     $(".workorderclass").each(function(){  
  4.             $(this).click(function(){  
  5.                 //绑定订单的编号,便于在下一个页面切换时候使用  
  6.                 TempCache.setItem("order_function_mgr_id",$(this).attr("id"));  
  7.                   
  8.                 TempCache.setItem("order_function","serviceOrderFunction");  
  9.                 TempCache.setItem("order_function_mgr_id_w",$(this).attr("id"));  
  10.             });  
  11.              
  12.     });  
  13. }  

 

在页面B的初始化方法中:

  使用并适时清空页面的storage、。

Js代码  
  1.     //工单展示的初始化信息  
  2.     function displayWorkOrder(){  
  3.          //绑定订单的编号,便于在下一个页面切换时候使用  
  4.          var workOrderId=TempCache.getItem("order_function_mgr_id");  
  5.          workOrderId=workOrderId.replace(/(^\s*)|(\s*$)/g,"");  
  6.          //追踪工单来源  
  7.           functionName=TempCache.getItem("order_function");  
  8.           functionName=functionName.replace(/(^\s*)|(\s*$)/g,"");  
  9.             
  10.          if(workOrderId!=''){  
  11.             queryWorkOrderInfo(workOrderId,functionName);  
  12. TempCache.removeItem("order_function_mgr_id");       }else{  
  13.             alert("服务请求失败,请稍候再试....");  
  14.          }  
  15.     }  

 

如有不懂的地方,欢迎沟通谢谢!

转载于:https://www.cnblogs.com/ranzige/p/3836153.html

你可能感兴趣的文章
Atitit.软件开发的三层结构isv金字塔模型
查看>>
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx...
查看>>
MySQL timed_mutexes
查看>>
B站 React教程笔记day1(3)其他API
查看>>
知识点3-4:给视图传递数据
查看>>
第44章:MongoDB-集群--Sharding(分片)--分片的片键选择
查看>>
烦人的运营后台导出大批量数据
查看>>
docker3.10修改默认地址及docker常用命令
查看>>
SEO基础
查看>>
博客随笔《工程项目》目录大纲
查看>>
tree
查看>>
C语言与C++语言之间关系
查看>>
使用引导光盘,将你的PC变身瘦客户机
查看>>
利用PPPOE认证获取路由器中宽带账号密码
查看>>
桟和队列--约瑟夫问题
查看>>
linux 使用外部设备的(光盘) 安装和更新库
查看>>
工作日志2014-07-09
查看>>
ORACLE数据字典
查看>>
【免费软件测试视频-0020】——LR系列之--Web录制常见错误解决方法
查看>>
hadoop2.6.0版本搭建伪分布式环境
查看>>