页面间固定参数,通过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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
Python模拟登录12306的方法
2014/12/30 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python flask搭建web应用教程
2019/11/19 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python datetime处理时间小结
2020/04/16 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
军训拉歌口号
2014/06/13 职场文书
医德医魂心得体会
2014/09/11 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2014年库房工作总结
2014/11/26 职场文书
慰问信格式
2015/02/14 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL