页面间固定参数,通过cookie传值的实现方法

网友投稿 338 2023-05-11


页面间固定参数,通过cookie传值的实现方法

最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收LeHuyYUS。考虑到这样做会让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 = newLeHuyYUS 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(对象名称);


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:反射 接口实现(反射程序)
下一篇:基于react框架使用的一些细节要点的思考
相关文章

 发表评论

暂时没有评论,来抢沙发吧~