导语:今天,说一下这个cookie的属性和用法,包括设置cookie,获取cookie,删除cookie。cookie是Document对象的一个属性,可以使js方便的把
一些数据放在在本地进行存取操作。cookie还用于客户端脚本化,是http协议的一个标准扩展。

cookie的概念

cookie是Web游览器存储的少量命名数据,它作用于某个特定的网页或者网站。它可以在客户端和服务器之间的传递数据,位于服务器端的脚本可以读取到客户端的cookie。

常用的使用场景有以下几个:

  • 用户登录,服务器记录下用户的登录信息,以便验证下次是否重新登录;

  • 电商网站的购物车,记录下用户的购物车购买东西喜好,以便下次推广相关的产品;

  • 网络广告主和网络广告服务商的广告推广,对于不同网站进行用户广告的推送。

温馨提示:由于cookie是http协议的标准扩展,所以要在http协议下的网站和页面才可以使用cookie。不要使用在游览器中打开(类似于:

file:///D:/test.html),建议开启http服务(http://localhost:2009/test.html)。

检测是否支持

由于用户登录或者购物车需要记录cookie的有关信息,所以首先要检测用户的游览器是否开启了cookie,没有开启要提示用户开启cookie后在操作。

下面是检测游览器的cookie是否开启的方法:

1
<p id="cookieTips"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//isOpenCookie这个方法需要传一个id用来给用户显示提示语。
function isOpenCookie(id) {
var cookieTips = document.getElementById(id);
var result = window.navigator.cookieEnabled;
if (result) {
cookieTips.style.color = '#269d26';
cookieTips.style.fontSize = '18px';
cookieTips.innerHTML = '您的cookie已激活!';
} else {
cookieTips.style.color = '#f00';
cookieTips.style.fontSize = '18px';
cookieTips.innerHTML = '您的cookie未激活,可能不能享受好的服务!';
}
return result;
}
console.log(isOpenCookie('cookieTips')); // true

cookie的属性

cookie的属性有名字和值,最大期限,当前可以访问cookie信息的文件路径,可以访问cookie的网站域名,还有安全性属性,下面一一介绍。

  • 名字和值

这个就是name和value属性了,name是你要存的数据的名字,value是你要存的名字对应的值。

由于这个值是明文可见的,非常的不安全,所以你要进行编码和解码操作,可以使用以下两种方法:

早期的方法:escape()编码,unescape()解码;(已废弃,但可以用)

新的方法:encodeURIComponent()编码,decodeURIComponent()解码。

方法: document.cookie = "<名字>=<值>"

例如:document.cookie = "title=" + encodeURIComponent('世界那么大')

  • 最大期限

最大期限之前是expires属性(已废弃);现在是max-age来表示,它接收秒作为单位。

方法: document.cookie = “max-age=<数字>”。

例如:document.cookie = “title=” + encodeURIComponent(‘你好啊’) + “;max-age=” + 606024*7;。

  • path

path就是当前文件所在的目录,在这个目录下的所以网页都可以共享这个cookie信息,但是不在这个路径下的网页就享受不到这个cookie信息了。

比如说:test.html在server这个目录下,test.html的网页设置了cookie,那么这个server下面的其他网页也可以共享这一个cookie信息;但是不在server这个目录下的网页就享受不到这个cookie信息了。

可以通过设置这个属性来告诉游览器哪些目录下的网页可以获取cookie信息。

方法: document.cookie = "path='<文件路径名字>'"

例如:document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';path=' + '/';

  • domain

domain就是当前html文件所在的这个网站(不包括二级域名),在这个网站下的所以网页都可以共享这个cookie信息,但是不在这个网站下的网页就享受不到这个cookie信息了。

比如说:test.html在http://www.examle.com这个目录下,test.html的网页设置了cookie,那么这个http://www.examle.com网站下面的其他网页也可以共享这一个cookie信息;但是不在http://www.examle.com这个网站下的网站(比如:http://blog.examle.com)网页就享受不到这个cookie信息了。

可以通过设置这个属性来告诉游览器哪些网站可以获取cookie信息。

方法: document.cookie = "domain='<网站域名>'"

例如:document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';domain=' + '127.0.0.1';

那么其他的比如说localhost下面的网页无法获取cookie信息。

  • secure

这个属性是一个布尔值,如果添加到一条cookie记录中,那么这个cookie只能在带有https安全协议或者其他安全协议的网站下面进行存取。

例如: document.cookie = "title=" + encodeURIComponent('你好啊') + ";max-age=" + 60*60*24*7 + ';secure';

cookie的方法

设置cookie

可以通过封装一个方法来方便的设置cookie,下面是我封装的一个设置cookie的方法,里面要传五个参数,分别对于五个属性。

原理就是对传入的参数进行类型检测,然后遍历对象的属性和值进行存储。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
function setCookie(name,value,maxAge,path,domain,secure) {
//检测flag
var cookieinfo = {
name: name,
value: value,
maxAge: maxAge,
path: path,
domain: domain,
secure: secure
};
var res = '';

//验证值
for(key in cookieinfo) {
var val = cookieinfo[key];
if (key == 'path') {
if (!val) {
continue;
}else if (typeof val != 'string') {
throw new Error('Error: path must be an string!');
}
}else if (key == 'domain') {
if (!val) {
continue;
}else if (typeof val != 'string') {
throw new Error('Error: domain must be an string!');
}
}else if (key == 'secure') {
if (!val) {
continue;
}else if (typeof val != 'boolean') {
throw new Error('Error: secure must be an boolean!');
}
}else if (val == '' || val == undefined || val == null) {
throw new Error('Error:' + key + ' not a null value!');
}
}

//赋值
for (var key in cookieinfo) {
var val = cookieinfo[key];
if (val == undefined) {
continue;
}
if (key == 'value') {
continue;
}
if (key == 'name') {
res += cookieinfo['name'] + '=' + encodeURIComponent(cookieinfo['value']) + ';';
}else if (key == 'maxAge') {
res += 'max-age' + '=' + cookieinfo['maxAge'] + ';';
} else if (key == 'secure' && cookieinfo['secure'] === true) {
res += 'secure;';
} else {
res += key + '=' + val + ';';
}
}

if (res) {
document.cookie = res;
}
}
//例如:
setCookie('title',document.title,60*60*24*7,'/','127.0.0.1',secure);

读取cookie

可以通过封装一个方法来方便的读取cookie,下面是我封装的一个读取cookie的方法,里面要传两个参数,第一个是布尔值,true表示获取全部cookie,false表示不用;第二个参数是你要获取的cookie名字。

原理就是对cookie进行分解,然后再进行对比,返回相应的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function getCookie(isAll,name) {
var tisAll = isAll;
var tname = name;

if (typeof tisAll != 'boolean') {
throw new Error('Error: tisAll not an boolean!');
}
if (!tisAll) {
if (tname == 'undefined' || tname == null ||
tname == '' || typeof tname == 'object' ||
typeof tname == 'function') {
throw new Error('Error: name not an object or function or undefined!');
}
}

var cookie = document.cookie;
var cookies = cookie.split(';');
var value = '';
var allObj = {};
for(var i=0;i<cookies.length;i++) {
var vals = cookies[i].split('=');
var allKey = vals[0].trim();
var allVal = decodeURIComponent(vals[1]);
if (allKey == '' && allVal == '') {
continue;
} else {
if (tisAll) {
allObj[allKey] = allVal;
} else {
if (tname == allKey) {
value = allVal;
}
}
}
}

if (!tisAll && value == '') {
throw new Error('Error:' + tname + ' not found!');
}

if (tisAll) {
for (var key in allObj) {
if (key == '' && allObj[key] == 'undefined') {
throw new Error('Error: all cookie not found!');
}
}
}

var res = tisAll ? allObj : value;

return res;
}
//例如:上面的cookie值
console.log(getCookie(false,'title')); // 你好啊

删除cookie

可以通过封装一个方法来方便的删除cookie,下面是我封装的一个删除cookie的方法,里面要传一个参数,参数是你要删除的cookie名字。

原理:只要设置这个cookie的期限为0,就可以删除这个cookie了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function removeCookie(name) {
if (name == '' || name == undefined || name == null) {
throw new Error('Error: name not an null!');
}
var cookie = document.cookie;
var cookies = cookie.split(';');
var res;
for(var i=0;i<cookies.length;i++) {
var vals = cookies[i].split('=');
var allKey = vals[0].trim();
if (name == allKey) {
res = true;
}
}
if (!res) {
throw new Error('Error:' + name +' not found!');
}

document.cookie = name + '=' + '' + ';max-age=0';
}
//例如:删除上面的title
removeCookie('title');

写在最后

有关cookie的知识点就讲这么多,老铁,赶快用起来吧!