学习了Cookie之后,对登录注册功能的实现,又有了全新的认识。
首先,我们先了解一下Cookie的基础知识,这些都是很重要的点(这里主要参考阮一峰老师的博客)。
Cookie的基本概念
1. Cookie是服务器保存在浏览器的一小段文本信息,<!注意,这里是服务器保存在浏览器中的>
2. 每个Cookie的大小一般不超过4KB
3. 浏览器每次向服务器发起请求,就会自动附上这段信息
<注意 自动两个字,是自动,这个功能是浏览器自己完成的,
所以我们写Js的时候不用管怎么拿到Cookie怎么传给服务器,浏览器会帮我们完成的
Cookie的常用场景
Cookie主要用来分辨两个请求是否来自同一个浏览器,以及用来保存一些状态信息,常用场合:
1. 对话(session)管理: 保存登录,购物车等需要记录的信息。
2. 个性化: 保存用户的偏好,如网页的背景色,字体大小等。
3. 追踪: 记录和分析用户行为
很多人用Cookie作客户端的存储,虽然可行,但是并不推荐这种做法。
因为Cookie的设计初衷并不是整个,且容量很小,只有4KB,
缺乏数据操作接口,
而且会影响性能
(每次请求都要发送给服务器端,很占用流浪,
假如你有一个3kb的Cookie,发送了10次请求,那么总计就会有30kb的数据在网络上传输)
客户端存储推荐用 Web storage API 和 IndexedDB。
Cookie的基本信息
1.名字
2. 值(真正的数据写在这里)
3. 到期时间
4. 所属域名(默认是当前域名)
5. 生效的路径 (默认是当前网址)
举例来说:
当我们访问 www.example.com 时,服务器就会在浏览器写入一个 Cookie了
那个这个Cookie包含了什么呢?
1. cookie的名字和值
2. www.example.com这个域名
3. 根路径 '/',根路径为'/'意味着这个 Cookie对该域名的根路径和它的所有子路径都有效
...(可能还有到期时间等其他信息)
注意:如果路径设为/forums,
那么这个 Cookie 只有在访问www.example.com/forums及其子路径时才有效
查看浏览器是否打开 Cookie 功能
window.navigator.cookieEnabled // true
获取当前网页的Cookie
document.cookie
Cookie大小和数量的限制
每个浏览器对Cookie的大小和数量的限制不一样,
但是一般来说,单个域名(注意这里是单个域名)设置的Cookie不应超过30个,
且每个Cookie的大小不应超过4kb,超过以后,Cookie将会被忽略,不会被设置
共享Cookie
浏览器的同源政策规定,两个网址,只要域名相同,端口相同,就可以共享Cookie
注意,这里不需要协议相同
也就是说,http://example.com设置的 Cookie,可以被https://example.com读取
Cookie与HTTP协议
1.Cookie的生成
服务器是如何将Cookie写入到浏览器的呢?
服务器只要在回应的头信息中,放置一个 Set-cookie字段就可以了。
Set-cookie: foo = bar;
也可以设置多个Set-cookie,下面是一个回应例子:
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry;Expires=<date>;Domain=<domain-value>;Path=<path-value>;Secure;HttpOnly
[page content]
如果想要更改之前设置的一个Cookie,那么就必须同时满足四个条件
(注意这里是四个条件):Cookie 的key、domain、path和secure都匹配。
只要有一个属性不同,就会重新生成一个新的Cookie
Cookie例子:
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
2.Cookie的发送
浏览器向服务器发送 HTTP 请求时,每个请求都会带上相应的 Cookie。
也就是说,把服务器早前保存在浏览器的这段信息,再发回服务器。
这时要使用 HTTP 头信息的Cookie字段。
一个请求的例子:
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
Cookie的属性
- Expires :具体到期时间,UTC格式,默认为null,若不设置,则浏览器关闭该Cookie就会被删除
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
- Max-Age属性指定从现在开始 Cookie 存在的秒数,比如60 * 60 * 24 * 365(即一年)。过了这个时间以后,浏览器就不再保留这个 Cookie。
- 如果同时指定了Expires和Max-Age,那么Max-Age的值将优先生效。
- Domain
Domain设置域名,就是浏览器发出Http请求时,那些域名要带上这个Cookie
若没有设置,则默认为当前URL的一级域名
如:
www.example.com会设为example.com,而且以后如果访问example.com的任何子域名
HTTP 请求也会带上这个 Cookie
如果Set-Cookie字段指定的域名,不属于当前的域名,那么浏览器就会拒绝这个Cookie
- Path
Path指定浏览器发出http请求之后,哪些路径要带上这个Cookie
比如,PATH属性是/,那么请求/docs路径也会包含该 Cookie。当然,前提是域名必须一致。
- Secure
Secure属性指定浏览器只有在加密协议 HTTPS 下,才能将这个 Cookie 发送到服务器。
另一方面,如果当前协议是 HTTP,浏览器会自动忽略服务器发来的Secure属性。
该属性只是一个开关,不需要指定值。如果通信是 HTTPS 协议,该开关自动打开。
- HttpOnly
HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到,
主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。
这样就防止了该 Cookie 被脚本读到,只有浏览器发出 HTTP 请求时,
才会带上该 Cookie。