页面间固定参数,通过cookie传值的实现方法


Posted in Javascript onMay 31, 2017

最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收。考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在cookie,其它页面拿出来就可以使用。

在此之前,先写通过url传值与取值的过程。url通过跳转页面,给跳转页的url问号后拼接参数的方法传值:

//问号后的userId / dialogId都是要传的参数
//如果有多个参数,就用“&”拼接
window.location.href = 'doctor_ask.html?userId=' + userId + "&dialogId=" + dialogId;

在doctor_ask.html页面,把在url中的参数取下来,要使用一个方法getQueryString(),其中有一个方法是用来获取url中含有中文参数的:

/* 获取url后的某一个query的值 */
function getQueryString( name ) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  var context = "";
  if (r != null)
  context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}

//获取Url中中文参数的方法
function getQueryUrlString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if(r != null) {
    return decodeURI(r[2]);
  }
  return "请选择";
}

使用方法获取参数:

//调用方法获取参数,方法中的参数名是一个字符串
var userId = getQueryString('userId')

第二种,通过cookie方法传值,我这里使用的是jQuery cookie,因此需要先加载jQuery与cookie:

<!--使用cookie-->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>

在其中一个页面,比如首页,将要保存的值存放在cookie.

如果仅是一个id,直接使用键值对的方法保存即可:

//将id保存在cookie
$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
//从cookie中取出id
var doctorId = $.cookie('doctorId');

如果是多个值,需要将多个值放在对象中,保存这个对象:

//将多个值存放在对象中
var userData = {
  userId: "11916122-f2eb-11e4-b756-f40669963d49",
  patientName: "张丽",
  patientAge: 23,
  patientSex: "F"
}
//将这个对象保存在cookie,它的键是对象名称,值为JSON.stirng(),目的是将这个对象解析为字符串,因为cookie的键与值都是字符串
$.cookie('userData' , JSON.stringify(userData));

如果在其它页面使用这个cookie中对象,可以取出这个对象并将对象转换为字符串

var userData = $.cookie('userData');
if(userData){
//JSON.parse() 将字符串解析为对象,方便使用
  userData = JSON.parse(userData);  
};

两个知识点:

//字符串解析为对象
JSON.parse(对象名称);
//对象解析为字符串
JSON.stringify(对象名称);

以上这篇页面间固定参数,通过cookie传值的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
基于react框架使用的一些细节要点的思考
May 31 #Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 #Javascript
使用原生js写ajax实例(推荐)
May 31 #Javascript
Javascript创建类和对象详解
May 31 #Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
You might like
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
TypeScript入门-接口
2017/03/30 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
Python模拟三级菜单效果
2017/09/11 Python
python机器人行走步数问题的解决
2018/01/29 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
战友聚会邀请函
2014/01/18 职场文书
仓库文员岗位职责
2014/04/06 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
房产公证委托书范本
2014/09/20 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
教师见习报告范文
2014/11/03 职场文书
党小组评议意见
2015/06/02 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
MySQL自定义函数及触发器
2022/08/05 MySQL