页面间固定参数,通过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 UI震动效果实现原理及步骤
Feb 04 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JS实现页面打印功能
Mar 16 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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中实现记住密码自动登录的代码
2011/03/02 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python 剪切移动文件的实现代码
2018/08/02 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python实现两张图片的像素融合
2019/02/23 Python
Python如何将字符串转换为日期
2020/07/31 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
几个MySql的面试题
2013/04/22 面试题
教学大赛获奖感言
2014/01/15 职场文书
校园安全标语
2014/06/07 职场文书
争先创优公开承诺书
2014/08/30 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书