Cookie知识总结(-)

·  阅读 1562

学习了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的属性

  1. Expires :具体到期时间,UTC格式,默认为null,若不设置,则浏览器关闭该Cookie就会被删除
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
复制代码
  1. Max-Age属性指定从现在开始 Cookie 存在的秒数,比如60 * 60 * 24 * 365(即一年)。过了这个时间以后,浏览器就不再保留这个 Cookie。
  2. 如果同时指定了Expires和Max-Age,那么Max-Age的值将优先生效。
  3. Domain
Domain设置域名,就是浏览器发出Http请求时,那些域名要带上这个Cookie
若没有设置,则默认为当前URL的一级域名
如:
www.example.com会设为example.com,而且以后如果访问example.com的任何子域名
HTTP 请求也会带上这个 Cookie
如果Set-Cookie字段指定的域名,不属于当前的域名,那么浏览器就会拒绝这个Cookie
复制代码
  1. Path
Path指定浏览器发出http请求之后,哪些路径要带上这个Cookie
比如,PATH属性是/,那么请求/docs路径也会包含该 Cookie。当然,前提是域名必须一致。
复制代码
  1. Secure
Secure属性指定浏览器只有在加密协议 HTTPS 下,才能将这个 Cookie 发送到服务器。
另一方面,如果当前协议是 HTTP,浏览器会自动忽略服务器发来的Secure属性。
该属性只是一个开关,不需要指定值。如果通信是 HTTPS 协议,该开关自动打开。
复制代码
  1. HttpOnly
HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到,
主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。
这样就防止了该 Cookie 被脚本读到,只有浏览器发出 HTTP 请求时,
才会带上该 Cookie。
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改