开发笔记:JavaScriptcookie学习

今天遇到一个需求&＃xff0c;需要通过做一个用户登录的功能&＃xff0c;并且需要使浏览器可以保存其登录信息&＃xff0c;使得用户下次再访问网页的时候无需再次进行登录操作&＃xff0c;那么这时就想到使用COOKIEs进行信息保存。

1.定义

COOKIE是一种用来在客户端硬盘上存储信息的手段&＃xff0c;可以用来存储一些信息&＃xff0c;实现一些特殊的效果&＃xff0c;例如实现多少天内免登陆&＃xff0c;或者存储一些小数据。

2.字段含义

COOKIE中所有的字段设置我们都是通过&＃xff1b;去进行分割。

• key&＃61;value&＃xff08;键&＃61;值&＃xff09; 就是 COOKIE的一个键值对&＃xff0c;一般是根据key拿到对应的value

• expires&＃xff08;过期时间&＃xff09;设置该COOKIE的过期时间&＃xff0c;expires&＃61;GMT的时间字符串&＃xff0c;例如要7天免登陆&＃xff0c;就可以设置过期时间为今天开始的7天之后的日期。如果不设置过期时间&＃xff0c;默认浏览器关闭该COOKIE就消失了。

• path&＃xff08;路径&＃xff09; COOKIE并不是在哪里都能够获取到的。在网站中分为很多目录&＃xff0c;可能很多目录中不需要使用到COOKIE&＃xff0c;所以可以设置COOKIE的路径&＃xff0c;这样更加安全&＃xff0c;避免任意目录都能访问到该COOKIE。通过 path&＃61;/E:Javascript/test 这样只能在该目录下才能获取到该COOKIE

• domain&＃xff08;域&＃xff09;默认该COOKIE在该COOKIE所在域名下才能够访问到&＃xff0c;但是有时候a.chaijinsong.com需要访问b.chaijinsong.com下的COOKIE&＃xff0c;这时候就需要设置domain&＃61;chaijinsong.com。这样两个子域名都可以访问该COOKIE

• secure&＃xff08;安全性&＃xff09; 默认secure是为false的&＃xff0c;即通过http协议来传输&＃xff0c;但是如果 secure&＃61;true 的话&＃xff0c;就只能t通过https来进行传输

3.条件

需要注意的是&＃xff0c;COOKIE 只有在服务环境下才能设置&＃xff0c;所以如果只是自己在本地练习COOKIE的话&＃xff0c;可以使用webstorm编辑器&＃xff0c; 它内部自带服务环境&＃xff0c;如果是使用vscode编辑器的小伙伴&＃xff0c;需要去下载Live Server 插件&＃xff0c;右击运行时选择【Open with Live Srever】查看效果即可。

1.简单的COOKIE设置

如下代码所示&＃xff0c;设置了一个key为name&＃xff0c;value为huanan的COOKIE。

document.COOKIE &＃61; "name&＃61;huanan";


在浏览器中该COOKIE的具体信息如下&＃xff1a;可以看到该COOKIE的到期时间为浏览会话结束时&＃xff0c;这是因为我们并未给该COOKIE设置到期时间&＃xff0c;所以该COOKIE在会话关闭的时候就会被清除。

2.带有过期时间的COOKIE设置

如下代码所示&＃xff0c;设置了一个key为name&＃xff0c;value为张三的COOKIE&＃xff0c;并且设置了过期时间为5天后。

var exdate &＃61; new Date();//获取当前时间
exdate.setDate(exdate.getDate() &＃43; 5);//获取当前时间&＃43;5天后的日期
// toUTCString() 是将时间根据世界时转换为字符串
document.COOKIE &＃61; "name&＃61;张三;" &＃43; "expires&＃61;" &＃43; exdate.toGMTString();


在浏览器中该COOKIE的具体信息如下&＃xff1a;可以看到该COOKIE的到期时间为创建时间&＃43;5天&＃xff0c;说明过期时间设置成功。

3.注意

如果要设置多条COOKIE&＃xff0c;必须一条条创建&＃xff0c;不能批量设置。

//设置第一条COOKIE
document.COOKIE &＃61; "name&＃61;huanan";
//设置第二条COOKIE
document.COOKIE &＃61; "age&＃61;19";

三、获取COOKIE

1.查看COOKIE

获取COOKIE前&＃xff0c;可以先查看下当前的COOKIE数据。

console.log(document.COOKIE)


控制台打印信息如下&＃xff1a;即所有的COOKIE都保存在一个字符串中。

2.获取COOKIE值

通过查看COOKIE值&＃xff0c;所知需要获得相应的COOKIE值我们可以通过字符串的一些方法配合使用截取该COOKIE字符串中我们想要的value值。具体代码如下所示&＃xff1a;

var name &＃61; "age";
// 获取该key首个字符在字符串中的下标位置
var index &＃61; document.COOKIE.indexOf(name);
console.log("index", index);
// 判断是否有这个COOKIE存在
if (index !&＃61; -1) {
// 获取该value值首个字符在字符串中的下标位置
index &＃61; index &＃43; name.length &＃43; 1;
// 获取value值最后一个字符的位置
end &＃61; document.COOKIE.indexOf(";", index);
if (end &＃61;&＃61; -1) {
end &＃61; document.COOKIE.length;
}
//得到想要的COOKIE的值
var value &＃61; unescape(document.COOKIE.substring(index, end));
console.log("vale", value);
} else {
console.log("不存在该COOKIE");
}

四、删除COOKIE

删除COOKIE就比较简单了&＃xff0c;我们只需要重新设置改COOKIE的过期时间比当前时间更早即可。

var name &＃61; "age";
var date &＃61; new Date();
date.setTime(date.getTime() - 10000);
document.COOKIE &＃61; name &＃43; "&＃61;v; expires&＃61;" &＃43; date.toGMTString();

五、方法封装

1.设置COOKIE

function setCOOKIE(name, value, expiredays) {
var exdate &＃61; new Date();
exdate.setDate(exdate.getDate() &＃43; expiredays);
document.COOKIE &＃61; name &＃43; "&＃61;" &＃43; escape(value) &＃43; (expiredays &＃61;&＃61; null ? "" : ";expires&＃61;" &＃43; exdate.toGMTString());
}


2.获取COOKIE

function getCOOKIE(name) {
var COOKIEs &＃61; document.COOKIE;
var COOKIE_pos &＃61; COOKIEs.indexOf(name);
if (COOKIE_pos !&＃61; -1) {
COOKIE_pos &＃61; COOKIE_pos &＃43; name.length &＃43; 1;
var COOKIE_end &＃61; COOKIEs.indexOf(";", COOKIE_pos);
if (COOKIE_end &＃61;&＃61; -1) {
COOKIE_end &＃61; COOKIEs.length;
}
var value &＃61; unescape(COOKIEs.substring(COOKIE_pos, COOKIE_end));
} else {
console.log("不存在该COOKIE");
}
return value;
}


3.删除COOKIE

function delCOOKIE(name) {
var date &＃61; new Date();
date.setTime(date.getTime() - 10000);
document.COOKIE &＃61; name &＃43; "&＃61;v; expires&＃61;" &＃43; date.toGMTString();
}