页面间固定参数,通过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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python实现解数独程序代码
2017/04/12 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
关于Java finally的面试题
2016/04/27 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
集体婚礼证婚词
2014/01/13 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
生日主持词
2014/03/20 职场文书
建筑投标担保书
2014/05/20 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Nginx 常用配置
2022/05/15 Servers