详细内容

1.什么是cookie

Cookie(会话跟踪技术):在一次会话从开始到结束的整个过程,全程跟踪记录客户端状态(例如:是否登录、购物车信息、是否已经下载、是否已经点赞、视频播放进度等等)

形象比喻:第一次跟服务器连接后,服务器发给你一张身份卡片(cookie),上面记录跟你有关的信息,以后还跟服务器连接的时候必须带着这个身份卡片,这样服务器就可以读到身份卡片上的信息作出页面的调整。

3.cookie的特点

cookie

  1. 可以设置过期时间
  2. 最大存储4kb
  3. 一个域名最多50条cookie(不同浏览器有区别)
  4. 只能存储字符串。一般存储重要信息

localstorage

  1. 不主动删除永久保存

  2. 最大5m

3.cookie语法

格式:name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

设置cookie:document.cookie='username=xxx';

获取cookie:alert(document.cookie);

:火狐支持本地加载文件缓存cookie,谷歌只支持服务器加载文件缓存cookie

3.1 编码与解码

解决存储中文乱码的问题,将中文编码存储,读取时解码读取。

document.cookie=’user=’+encodeURIComponent(‘钢铁侠’); //编码写入

alert(decodeURIComponent(document.cookie)); //解码读取

3.2 过期日期expires

expires:过期时间

  • 必须填写日期对象
    • 系统自动清除过期cookie
  • 默认值为会话,整个浏览器关闭为会话结束

获取n天后的日期

1
2
3
4
5
6
7
8
function afterOfDate(n){
var d=new Date();
var day=d.getDate();
d.setDate(n+day);
return d
}
//设置一条7天后过期的cookie
document.cookie="username=xxx;expires="+afterOfDate(7);

3.3 删除cookie

  1. cookie同名添加覆盖上一次

  2. 浏览器自动删除过期cookie

1
2
3
4
5
6
7
document.cookie="username=;expires="+afterOfDate(-1);
//将时间设置为过去的天数cookie就被浏览器删掉了

//快速获取过去时间 1970年
new Date(0);

document.cookie="username=;expires="+new Date(0);

3.4 cookie可选项

格式:name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

  • path 限制访问路径

    • 如果不去设置,默认是加载当前html文件的路径

    • 设置的cookie路径和当前加载文件的路径必须一致,不一致访问失败

  • domain 限制访问域名

    • 如果不去设置,默认是加载当前.html文件的服务器域名/ip
    • 设置cookie域名和加载当前文件的域名不一致,设置cookie失败
  • secure 安全

    • 如果不设置,设置cookie,可以通过http或者https协议加载文件设置
    • 设置了,只能通过https协议加载cookie

4.封装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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function $cookie(name){
//判断输入参数个数
switch(arguments.length){
case 1:
return getCookie(name);
break;
case 2:
if(arguments[1]==null){
removeCookie(name);
}else{
setCookie(name,arguments[1],{})
}
break;
case 3:
setCookie(name,arguments[1],arguments[2])
break;
default:
alert("error");
break;
}
}
/*
setCookie()
getCookie()
removeCookie()
*/
/*
expires 传入对应天数
*/
function setCookie(name, value, { expires, path, domain, secure }) {
var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires) {
cookieStr += ";expires=" + afterOfDate(expires);
}
if (path) {
cookieStr += ";path=" + path;
}
if (domain) {
cookieStr += ";domain=" + domain;
}
if (secure) {
cookieStr += ";secure";
}
document.cookie = cookieStr;
}
//获取n天后日期
function afterOfDate(n) {
var d = new Date();
var day = d.getDate();
d.setDate(n + day);
return d
}

//获取cookie
//超级英雄=钢铁侠;DC=海王;神话=孙悟空
function getCookie(name) {
var cookieStr = decodeURIComponent(document.cookie);
var start = cookieStr.indexOf(name + "=");
if (start == -1) {
return null;
} else {
//查询从start位置开始遇到的第一个分号
var end = cookieStr.indexOf(";", start);
if (end == -1) {
end = cookieStr.length;
}
//进行字符串提取
var str = cookieStr.substring(start, end);
var arr = str.split("=");
return arr[1];
}

}


//删除cookie
function removeCookie(name) {
document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}

评论