页面参数传递
在做页面的时候，比如用户数据（用户头像，名称，年龄）这些信息，因为大部分页面都要用，之前是通过url地址传，另一页面接收。考虑到这样做会让url过长，因此，尝试使用cookie，把固定的值保存在cookie，其它页面拿出来就可以使用。
url传值与取值的过程
url通过跳转页面，给跳转页的url问号后拼接参数的方法传值
1//问号后的userId / dialogId都是要传的参数
2//如果有多个参数，就用“&”拼接
3window.location.href = 'doctor_ask.html?userId=' + userId + "&dialogId=" + dialogId;在doctor_ask.html页面，把在url中的参数取下来，要使用一个方法getQueryString()，其中有一个方法是用来获取url中含有中文参数的：
1// 获取url后的某一个query的值
2function getQueryString( name ) {
3 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
4 var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
5 var context = "";
6 if (r != null)
7 context = r[2];
8 reg = null;
9 r = null;
10 return context == null || context == "" || context == "undefined" ? "" : context;
11}
12
13//获取Url中中文参数的方法
14function getQueryUrlString(name) {
15 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
16 var r = window.location.search.substr(1).match(reg);
17 if(r != null) {
18 return decodeURI(r[2]);
19 }
20 return "请选择";
21}使用方法获取参数：
1//调用方法获取参数，方法中的参数名是一个字符串
2var userId = getQueryString('userId')通过cookie方法传值
我这里使用的是jQuery cookie，因此需要先加载jQuery与cookie:
1<!--使用cookie-->
2<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
3<script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>在其中一个页面，比如首页，将要保存的值存放在cookie.
如果仅是一个id,直接使用键值对的方法保存即可：
1//将id保存在cookie
2$.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49');
3//从cookie中取出id
4var doctorId = $.cookie('doctorId');如果是多个值，需要将多个值放在对象中，保存这个对象：
1//将多个值存放在对象中
2var userData = {
3 userId: "11916122-f2eb-11e4-b756-f40669963d49",
4 patientName: "张丽",
5 patientAge: 23,
6 patientSex: "F"
7}
8//将这个对象保存在cookie,它的键是对象名称，值为JSON.stirng()，目的是将这个对象解析为字符串，因为cookie的键与值都是字符串
9$.cookie('userData' , JSON.stringify(userData));如果在其它页面使用这个cookie中对象，可以取出这个对象并将对象转换为字符串
1var userData = $.cookie('userData');
2if(userData){
3//JSON.parse() 将字符串解析为对象，方便使用
4 userData = JSON.parse(userData);
5};两个知识点
1//字符串解析为对象
2JSON.parse(对象名称);
3//对象解析为字符串
4JSON.stringify(对象名称);本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-06-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
