页面间固定参数,通过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 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
基于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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
layui 弹出层值回传解决方式
2019/11/14 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python sorted函数的小练习及解答
2019/09/18 Python
python列表生成器迭代器实例解析
2019/12/19 Python
pytorch SENet实现案例
2020/06/24 Python
python 制作磁力搜索工具
2021/03/04 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
学雷锋月活动总结
2014/04/25 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2016年元旦主持词
2015/07/06 职场文书
社区低保工作总结2015
2015/07/23 职场文书
聘任通知书
2015/09/21 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
浅谈Python协程asyncio
2021/06/20 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS