最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过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.

如果仅是一个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传值的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-05-28

html cookie传参,页面间固定参数,通过cookie传值的实现方法相关推荐

  1. Vue路由传参及传参后刷新导致参数消失处理

    参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第 ...

  2. vue页面传参(多个参数传值)与接参 - 代码篇

    index.js路由规则设定: /searchResult/syyName=:syyName 发送页面: //传参页面 this.$router.push({name: 'SearchResult', ...

  3. html页面url中文传值乱码,URL传参时,中文参数乱码的解决方法

    URL传参时,中文参数乱码的解决: 今天在工作中遇到了这样的一个问题,在页面之间跳转时,我将中文的参数放入到url中,使用location进行跳转传参,但是发现接收到的参数值是乱码.我的代码是这样写的 ...

  4. vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  5. 母子页的iframe传参跳转,参数需要编码

    背景: 我的项目是一个正常html嵌套了一个iframe, 项目需要传参后,改变iframe的src属性值,实现显示不同的页面 说明: 再不传值的时候显示是这样的 传值后显示所传值的页面 例如页面值是 ...

  6. 函数传参字典_Python 函数参数解包

    做一个简单.明亮.快乐的手艺人. 函数参数解包(Function Argument Unpacking)是在函数传参时将iterable参数对象中的元素解包出来的一种技术. 想象一个场景,当函数所有实 ...

  7. ios页面间传递参数四种方式

    ios页面间传递参数四种方式 1.使用SharedApplication,定义一个变量来传递. 2.使用文件,或者NSUserdefault来传递 3.通过一个单例的class来传递 4.通过Dele ...

  8. jsp传递参数java_JSP页面间传递参数方法介绍

    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...

  9. java ee页面间怎么传值_jsp页面间常见的几种传值方式

    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...

最新文章

  1. pythopn 迭代器
  2. Windows下mysql忘记密码的解决方法
  3. HTTPS协议开通,Apache服务器CSR签名申请
  4. svn服务端及客户端搭建和使用(三)
  5. 三星“打法”:先模仿对手 再吃掉对手
  6. python3 gui协程_Python3进阶-协程
  7. 在eclipse4.5.1官方英文版利用官方语言包汉化的方法
  8. Oracle -----视图
  9. 在Ubuntu中部署并测试Fabric 1.0 Beta
  10. 几种简单的垂直居中方式
  11. [转]Linux 技巧:让进程在后台可靠运行的几种方法
  12. 第一章 Shell基础知识
  13. Atitit 通用接口的设计与实现attilax 总结
  14. ps制作公章教程,沿着圆圈打字,斑驳效果
  15. 构建CA证书详解过程步骤
  16. vue提交表单数据到后端
  17. web前端入门到实战:CSS颜色、背景和剪切
  18. 【Python】Python中pip命令的使用(超级详细,命令大全)
  19. 2022 年全球重大经济事件盘点( I )
  20. EXT4分区工具MiniTool Partition Wizard Home Edition

热门文章

  1. 如果不这样用,Nacos也有安全问题!
  2. 【Matlab】根据图生成带权邻接矩阵,并求出最短路径
  3. 《Introduction to Computing Systems: From bits and gates to C and beyond》
  4. Linux Shell编程之别名和常用快捷键
  5. YOLOv3实现鱼类目标检测
  6. 频段表_5G频段范围之:频段3.3GHz-4.2GHz (n77,n78)
  7. 编写有效用例电子版_剖析用例设计方法的使用
  8. mllib协同过滤 java实现_协同过滤(ALS)算法介绍及Spark MLlib调用实例(Scala/Java/Python)...
  9. dfs.client.block.write.replace-datanode-on-failure
  10. html中ng-src,angularjs – 在ng-src中使用{{}}绑定,但不会加载ng-src