cookie的定义
HTTP协议本身是无状态的。什么是无状态呢,即服务器无法判断用户身份。Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。也就是说,cookie 是不需要我们自动设置,就会自动在客户端和服务端之间游走的数据,我们只是需要设置一下 cookie 的内容就可以。
cookie的作用
Cookie就是我们所理解的缓存,本地缓存;
比如客户端访问服务端,第一次访问结束后,我就会产生一个Cookie,把这个Cookie保留到客户端,打个比方:我第一次打开一个网页去看一个视频,它就需要网络或上网流量请求服务器获取资源,看完后服务端就会将你看的这个视频放到一个Cookie里面,然后发送给客户端,我下次再去看这个视频的时候,我就无需连接网络直接在本地即可观看,所以这就叫服务端产生(请求资源需要请求对应视频的服务器),发送给客户端(请求完毕后【就是看完后】,将资源保存到本地);有点儿像一边看一边下载。
但是它有缺点,它除了能放视频它还能放电影、音乐、文章甚至我们的密码也能放,用户名信息也能放,所以放一些用户信息就比较危险了,比方说我第一次访问网站,我登录了,我的名字叫张三,密码abc,服务端将我的信息放到Cookie里面再发送给客户端,那我以后确实不需要登录了,我就可以直接在本地读取账号密码登录,这样就不安全了,万一别人用你电脑解析破解了。
所以Cookie能提高访问服务端的效率,但是安全性较差!
cookie的存储形式
cookie是以字符串的形式存储,在字符串中以 key=value 的形式出现;每一个 key=value 是一条数据,多个数据之间以 ; 分割。
// cookie 的形态
'a=100; b=200; c=300;'
cookie的特点
存储大小有限制,一般是 4 KB 左右;数量有限制,一般是 50 条左右;有时效性,也就是有过期时间,一般是会话级别(也就是浏览器关闭就过期;有域名限制,也就是说谁设置的谁才能读取。
cookie属性项
属性项 属性项介绍
NAME=VALUE 键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
Expires 过期时间,在设置的某个时间点后该 Cookie 就会失效
Domain 生成该 Cookie 的域名,如 domain=“www.baidu.com”
Path 该 Cookie 是在当前的哪个路径下生成的,如 path=/wp-admin/
Secure 如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie
expires 过期时间:
【注】设置cookie的过期时间的,赋值必须是日期对象,如果过期,系统会自动清除过期的cookie。
【注】如果不设置这个值,默认是"会话",一次会话(打开浏览器-关闭浏览器)
【注】主动删除cookie,设置cookie时间是过去的时间。
<script>
/*
cookie的组成部分:
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]
*/
// alert(new Date(0));
document.cookie = 'username=tianyufei;expires=' + afterOfDate(7);
//封装函数,获取n天后的时间
function afterOfDate(n){
var d = new Date();
var day = d.getDate();
d.setDate(day + n);
return d;
}
// alert(afterOfDate(7));
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
document.cookie = 'username=;expires=' + new Date(0);
}
}
</script>
</head>
<body>
<button id = 'btn1'>删除cookie</button>
</body>
</html>
下面的可选项,了解即可:
path 限制访问路径
【注】如果不去设置,默认就是当前文件加载的路径。
【注】如果设置的cookie的路径,和实际加载文件的路径不一致,禁止访问cookie。
domain 限制访问域名
【注】如果不去设置,默认就是当前加载文件的主机名。
cookie的使用方式
读取 cookie 的内容使用document.cookie
const cookie = document.cookie;
console.log(cookie); // 就能得到当前 cookie 的值
设置 cookie 的内容使用document.cookie
// 设置一个时效性为会话级别的 cookie
document.cookie = 'a=100';
// 设置一个有过期时间的 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00
GMT";'
// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期,过期后会自动消失
删除 cookie 的内容使用document.cookie
// 因为 cookie 不能直接删除
// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
// 那么浏览器就会自动删除 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00
GMT";'