页面间固定参数,通过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 相关文章推荐
json 定义
Jun 10 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
详解TypeScript的基础类型
Feb 18 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/11/06 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
javascript如何创建对象
2016/08/29 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
pytorch 共享参数的示例
2019/08/17 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
统计员岗位职责
2013/11/14 职场文书
军训教官感言
2014/03/02 职场文书
外国人聘用意向书
2014/04/01 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
python manim实现排序算法动画示例
2022/08/14 Python