cookie详解（含vue-cookie）

今天看到一篇cookie的文章，写的特别详细，感谢 晚晴幽草轩 的分享，原文连接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9Ekm0u33w

原文以下，记录到此供之后查阅并但愿好文章能被更多须要的人看到

背景

 

在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。

 

在JavaScript中能够经过 document.cookie 来读取或设置这些信息。因为 cookie 多用在客户端和服务端之间进行通讯，因此除了JavaScript之外，服务端的语言（如PHP）也能够存取 cookie。

 

Cookie详解

 

Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说，Cookie是存储在客户端上的一小段数据，浏览器（即客户端）经过HTTP协议和服务器端进行Cookie交互。

 

Cooke独立于语言存在，严格地说，Cookie并非由PHP、Java等语言实现的，而是由这些语言对Cookie进行间接操做，即发送HTTP指令，浏览器收到指令便操做Cookie并返回给服务器。所以，Cookie是由浏览器实现和管理的。举例说，PHP并无真正设置过Cookie，只是发出指令让浏览器来作这件事。PHP中可使用setcookie() 或 setrawcookie() 函数设置Cookie。setcookie()最后一个参数HttpOnly设置了后，JavaScript就没法读取到这个Cookie。

 

设置Cookie时需注意：①函数有返回值，false失败，true成功，成功仅供参考，不表明客户端必定能接收到；②PHP设置的Cookie不能当即生效，要等下一个页面才能看到（Cookie从服务器传给浏览器，下个页面浏览器才能把设置的Cookie传回给服务器）；若是是JavaScript设置的，是当即生效的；③Cookie没有显示的删除函数，能够设置expire过时时间，自动触发浏览器的删除机制。

 

Cookie是HTTP头的一部分，即现发送或请求Cookie，才是data域；setcookie()等函数必须在数据以前调用，这和header() 函数是相同的。不过也可使用输出缓冲函数延迟脚本的输出，知道设置好全部Cookie和其余HTTP标头。

 

Cookie一般用来存储一些不是很敏感的信息，或者进行登陆控制，也可用来记住用户名、记住免密码登陆、防止刷票等。每一个域名下容许的Cookie是有限制的，根据浏览器这个限制也不一样。Cookie不是越多越好，它会增长宽带，增长流量消耗，因此不要滥用Cookie；不要把Cookie看成客户端的存储器来用。一个域名的每一个Cookie限制以4千字节（KB）键值对的形式存储。

 

还有一种Cookie是Flash建立的，成为Flash Shard Object，又称Flash Cookie，即便清空浏览器全部隐私数据，这类顽固的Cookie还会存在硬盘上，由于它只受Flash管理，不少网站采用这种技术识别用户。

 

Cookie跨域，主要是为了统一应用平台，实现单点登陆；需使用P3P协议（Platform for Privacy Preferences），经过P3P使用户本身能够指定浏览器的隐私策略，达到存储第三方Cookie的目的，只须要在响应用户请求时，在HTTP的头信息中增长关于P3P的配置信息就能够了。Cookie跨域涉及两个不一样的应用，习惯上称为第一方和第三方。第三方一般是来自别人的广告、或Iframe别的网站的URL，这些第三方网站可能使用的Cookie。

 

Cookie格式

 

Cookie中保存的信息都是文本信息，在客户端和服务器端交互过程当中，cookie信息被附加在HTTP消息头中传递，cookie的信息由键/值对组成。下面是一个HTTP头中cookie的例子：

 

Set-Cookie: key = value; Path=/

 

Cookie中存放的信息包含cookie自己属性和用户自定义属性，一个cookie只能包含一个自定义键/值对。Cookie自己属性有”Comment” 、”Domain”、”Max-Age”、”Path”、”Secure”、”Version”。

 

Comment 属性是cookie的产生着对该cookie的描述；

 

Domain 属性定义可访问该cookie的域名，对一些大的网站，若是但愿cookie能够在子网站中共享，可使用该属性。例如设置Domain为 .bigsite.com ,则sub1.bigsite.com和sub2.bigsite.com均可以访问已保存在客户端的cookie，这时还须要将Path设置为/。

 

Max-Age 属性定义cookie的有效时间，用秒计数，当超过有效期后，cookie的信息不会从客户端附加在HTTP消息头中发送到服务端。

 

Path 属性定义网站上能够访问cookie的页面的路径，缺省状态下Path为产生cookie时的路径，此时cookie能够被该路径以及其子路径下的页面访问；能够将Path设置为/，使cookie能够被网站下全部页面访问。

 

Secure 属性值定义cookie的安全性，当该值为true时必须是HTTPS状态下cookie才从客户端附加在HTTP消息中发送到服务端，在HTTP时cookie是不发送的；Secure为false时则可在HTTP状态下传递cookie，Secure缺省为false。

 

Version 属性定义cookie的版本，由cookie的建立者定义。

 

Cookie的建立

 

Cookie能够在服务器端建立，而后cookie信息附加在HTTP消息头中传到客户端，若是cookie定义了有效期，则本保存在客户端本地磁盘。保存cookie的文件是一个文本文件，所以不用担忧此文件中的内容会被执行而破坏客户的机器。支持Web端开发的语言都有建立cookie的方法或函数，以及设置cookie属性和添加自定义属性的方法或函数，最后是将cookie附加到返回客户端的HTTP消息头中。

 

建立cookie时若是不指定生存有效时间，则cookie只在浏览器关闭前有效，cookie会在服务器端和客户端传输，可是不会保存在客户机的磁盘上，打开新的浏览器将不能得到原先建立的cookie信息。

 

Cookie信息保存在本地时会保存到当前登陆用户专门目录下，保存的cookie文件名中会包含建立cookie所在页面网站的域名，当浏览器再次链接该网站时，会从本机cookie存放目录下选出该网站的有效cookie，将保存在其中的信息附加在HTTP消息头中发送到服务器端，服务器端程序就可根据上次保存在cookie的信息为访问客户提供“记忆”或个性化服务。

 

Cookie除了能够在服务器端建立外，也能够在客户端的浏览器中用客户端脚本(如javascript)建立。客户端建立的cookie的性质和服务器端建立的cookie同样，能够保存在本地，也能够被传送到服务器端被服务器程序读取。

 

Cookie 基础知识

 

1. cookie 是有大小限制的，大多数浏览器支持最大为 4096 字节的 Cookie(具体会有所差别，可使用这个好用的工具:http://browsercookielimits.squawky.net/ 进行测试);若是 cookie 字符串的长度超过最大限制，则该属性将返回空字符串。

2. 因为 cookie 最终都是以文件形式存放在客户端计算机中，因此查看和修改 cookie 都是很方便的，这就是为何常说 cookie 不能存放重要信息的缘由。

3. 每一个 cookie 的格式都是这样的：cookieName = Vaue；名称和值都必须是合法的标示符。

4. cookie 是存在 有效期的。在默认状况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束。若是想要 cookie 能在浏览器关掉以后还可使用，就必需要为该 cookie 设置有效期，也就是 cookie 的失效日期。

5. alert(typeof document.cookie)结果是 string.

6. cookie 有域和路径这个概念。域就是domain的概念，由于浏览器是个注意安全的环境，因此不一样的域之间是不能互相访问 cookie 的(固然能够经过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念，一个网页所建立的 cookie 只能被与这个网页在同一目录或子目录下得全部网页访问，而不能被其余目录下得网页访问（这句话有点绕，一会看个例子就好理解了）。

7. 其实建立cookie的方式和定义变量的方式有些类似，都须要使用 cookie 名称和 cookie 值。同个网站能够建立多个 cookie ，而多个 cookie 能够存放在同一个cookie 文件中。

8. cookie 存在两种类型：①:你浏览的当前网站自己设置的 cookie ②来自在网页上嵌入广告或图片等其余域来源的 第三方 cookie (网站可经过使用这些 cookie 跟踪你的使用信息)

9. cookie 有两种清除方式：①:经过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能) ②经过设置 cookie 的有效期来清除 cookie.注：删除 cookie 有时可能致使某些网页没法正常运行。

10. 浏览器能够经过设置来接受和拒绝访问 cookie。出于功能和性能的缘由考虑，建议尽可能下降 cookie 的使用数量，而且要尽可能使用小 cookie。

 

Cookie的使用

 

从cookie的定义能够看到，cookie通常用于采用HTTP做为进行信息交换协议的客户端和服务器端用于记录须要持久化的信息。通常是由服务器端建立要记录的信息，而后传递到客户端，由客户端从HTTP消息中取出信息，保存在本机磁盘上。当客户端再次访问服务器端时，从本机磁盘上读出原来保存的信息，附加到HTTP消息中发送给服务器端，服务器端从HTTP消息中读取信息，根据实际应用的需求进行进一步的处理。

 

服务器端cookie的建立和再次读取功能一般由服务器端编程语言实现，客户端cookie的保存、读取通常由浏览器来提供，而且对cookie的安全性方面能够进行设置，如是否能够在本机保存cookie。

 

因为cookie信息以明文方式保存在文本文件中，对一些敏感信息如口令、银行账号若是要保存在本地cookie文件中，最好采用加密形式。

 

与cookie相似的另外一个概念是会话（Session），会话通常是记录客户端和服务器端从客户端浏览器链接上服务器端到关闭浏览器期间的持久信息。会话通常保存在内存中，不保存到磁盘上。会话能够经过cookie机制来实现，对于不支持cookie的客户端，会话能够采用URL重写方式来实现。能够将会话理解为内存中的cookie。

 

使用会话会对系统伸缩性形成负面影响，当服务器端要在不少台服务器上同步复制会话对象时，系统性能会受到较大伤害，尤为会话对象较大时。这种状况下能够采用cookie，将须要记录的信息保存在客户端，每次请求时发送到服务器端，服务器端不保留状态信息，避免在服务器端多台机器上复制会话而形成的性能降低。

 

Cookie 基本操做

 

对于 Cookie 得经常使用操做有，存取，读取，以及设置有效期；具体能够参照 JavaScript 操做 Cookie 一文；但，近期在前端编码方面，皆以Vue为冲锋利器，因此就有用到一款插件 vue-cookie,其代码仅30行，堪称精妙，读取操做以下：

 

set: function (name, value, days) {

    var d = new Date;

    d.setTime(d.getTime() + 24*60*60*1000*days);

    window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();

},

get: function (name) {

    var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');

    return v ? v[2] : null;

},

delete: function (name) {

    this.set(name, '', -1);

}

 

cookie 域概念

 

路径能解决在同一个域下访问 cookie 的问题，我们接着说 cookie 实现同域之间访问的问题。语法以下：

 

document.cookie = “name=value;path=path;domain=domain“

 

红色的domain就是设置的 cookie 域的值。例如 “www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，咱们若是想让”sports.qq.com” 下的cookie被 “www.qq.com” 访问，咱们就须要用到cookie 的domain属性，而且须要把path属性设置为 “/“。例：

 

document.cookie = “username=Darren;path=/;domain=qq.com“

 

注：必定的是同域之间的访问，不能把domain的值设置成非主域的域名。

 

cookie 安全性

 

一般 cookie 信息都是使用HTTP链接传递数据，这种传递方式很容易被查看，在控制台下运行document.cookie,一目了然；因此 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。因此 cookie 的这个属性的名称是“secure”，默认的值为空。若是一个 cookie 的属性为secure，那么它与服务器之间就经过HTTPS或者其它安全协议传递数据。语法以下：

 

document.cookie = “username=Darren;secure”

 

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。若是想让本地cookie也加密，得本身加密数据。

 

注： 就算设置了secure 属性也并不表明他人不能看到你机器本地保存的 cookie 信息，因此说到底，别把重要信息放cookie就对了。

 

Session详解

 

Session即回话，指一种持续性的、双向的链接。Session与Cookie在本质上没有区别，都是针对HTTP协议的局限性而提出的一种保持客户端和服务器间保持会话链接状态的机制。Session也是一个通用的标准，但在不一样的语言中实现有所不一样。针对Web网站来讲，Session指用户在浏览某个网站时，从进入网站到浏览器关闭这段时间内的会话。由此可知，Session其实是一个特定的时间概念。

 

使用Session能够在网站的上下文不一样页面间传递变量、用户身份认证、程序状态记录等。常见的形式就是配合Cookie使用，实现保存用户登陆状态功能。和Cookie同样，session_start() 必须在程序最开始执行，前面不能有任何输出内容，不然会出现警告。PHP的Session默认经过文件的方式实现，即存储在服务器端的Session文件，每一个Session一个文件。

 

Session经过一个称为PHPSESSID的Cookie和服务器联系。Session是经过sessionID判断客户端用户的，即Session文件的文件名。sessionID其实是在客户端和服务端之间经过HTTP Request 和 HTTP Response传来传去。sessionID按照必定的算法生成，必须包含在 HTTP Request 里面，保证惟一性和随机性，以确保Session的安全。若是没有设置 Session 的生成周期， sessionID存储在内存中，关闭浏览器后该ID自动注销；从新请求该页面，会从新注册一个sessionID。若是客户端没有禁用Cookie，Cookie在启动Session回话的时候扮演的是存储sessionID 和 Session 生存期的角色。Session过时后，PHP会对其进行回收。

 

假设客户端禁用Cookie，能够经过URL或者隐藏表单传递sessionID；php.ini中把session.use_trans_sid 设成1，那么链接后就会本身加Session的ID。

 

Session以文件的形式存放在本地硬盘的一个目录中，当比较多时，磁盘读取文件就会比较慢，所以把Session分目录存放。

 

对于访问量大的站点，用默认的Session存储方式并不适合，较优的方法是用Data Base存取Session。在大流量的网站中，Session入库存在效率不高、占据数据库connection资源等问题。针对这种状况，可使用Memcached、Redis等Key-Value数据存储方案实现高并发、大流量的Session存储。

 

session与cookie的区别：

 

1，session 在服务器端，cookie 在客户端（浏览器）

2，session 存在在服务器的一个文件里（默认），不是内存

3，session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，若是 浏览器禁用了 cookie ，同时 session 也会失效（固然也能够在 url 中传递）

4，session 能够放在 文件，数据库，或内存中均可以。

5，用户验证这种场合通常会用 session

所以，维持一个会话的核心就是客户端的惟一标识，即 session id

 

更为详尽的说法：

 

1. 因为HTTP协议是无状态的协议，因此服务端须要记录用户的状态时，就须要用某种机制来识具体的用户，这个机制就是Session.典型的场景好比购物车，当你点击下单按钮时，因为HTTP协议无状态，因此并不知道是哪一个用户操做的，因此服务端要为特定的用户建立了特定的Session，用用于标识这个用户，而且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个惟一标识。在服务端保存Session的方法不少，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，通常会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务好比Memcached之类的来放 Session。

2. 思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次建立Session的时候，服务端会在HTTP协议中告诉客户端，须要在 Cookie 里面记录一个Session ID，之后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，若是客户端的浏览器禁用了 Cookie 怎么办？通常这种状况下，会使用一种叫作URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。

3. Cookie其实还能够用在一些方便用户的场景下，设想你某次登录过一个网站，下次登陆的时候不想再次输入帐号了，怎么办？这个信息能够写到Cookie里面，访问网站的时候，网站页面的脚本能够读取这个信息，就自动帮你把用户名给填了，可以方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。

 

因此，总结一下：

Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据能够保存在集群、数据库、文件中；

 

Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

 

Cookie与Session问答

 

1. Cookie运行在客户端，Session运行在服务端，对吗？

   A：不彻底正确。Cookie是运行在客户端，有客户端进行管理；Session虽然是运行在服务器端，可是sessionID做为一个Cookie是存储在客户端的。

2. 浏览器禁止Cookie，Cookie就不能用了，但Session不会受浏览器影响，对吗？

   A：错。浏览器禁止Cookie，Cookie确实不能用了，Session会受浏览器端的影响。很简单的实验，在登陆一个网站后，清空浏览器的Cookie和隐私数据，单机后台的链接，就会由于丢失Cookie而退出。固然，有办法经过URL传递Session。

3. 浏览器关闭后，Cookie和Session都消失了，对吗？

   A：错。存储在内存中额Cookie确实会随着浏览器的关闭而消失，但存储在硬盘上的不会。更顽固的是Flash Cookie，不过如今不少系统优化软件和新版浏览器都已经支持删除Flash Cookie。百度采用了这样的技术记忆用户：Session在浏览器关闭后也不会消失，除非正常退出，代码中使用了显示的unset删除Session。不然Session可能被回收，也有可能永远残留在系统中。

4. Session 比 Cookie 更安全吗？ 不该该大量使用Cookie吗？

   A：错误。Cookie确实可能存在一些不安全因素，但和JavaScript同样，即便突破前端验证，还有后端保障安全。一切都还要看设计，尤为是涉及提权的时候，特别须要注意。一般状况下，Cookie和Session是绑定的，得到Cookie就至关于得到了Session，客户端把劫持的Cookie原封不动地传给服务器，服务器收到后，原封不动地验证Session，若Session存在，就实现了Cookie和Session的绑定过程。所以，不存在Session比Cookie更安全这种说法。若是说不安全，也是因为代码不安全，错误地把用做身份验证的Cookie做为权限验证来使用。

5. Session是建立在服务器上的，应该少用Session而多用Cookie，对吗？

   A：错。Cookie能够提升用户体验，但会加大网络之间的数据传输量，应尽可能在Cookie中仅保存必要的数据。

6. 若是把别人机器上的Cookie文件复制到个人电脑上（假设使用相同的浏览器），是否是可以登陆别人的账号呢？如何防范？

   A：是的。这属于Cookie劫持的一种作法。要避免这种状况，须要在Cookie中针对IP、UA等加上特殊的校验信息，而后和服务器端进行比对。

7. 在IE浏览器下登陆某网站，换成Firefox浏览器是否仍然是未登陆状态？使用IE登陆了腾讯网站后，为何使用Firefox能保持登陆状态？

   A：不一样浏览器使用不一样的Cookie管理机制，没法实现公用Cookie。若是使用IE登陆腾讯网站，使用Firefox也能登陆，这是因为在安装腾讯QQ软件时，你的电脑上同时安装了针对这两个浏览器的插件，能够识别本地已登陆QQ号码进而自动登陆。本质上，不属于共用Cookie的范畴。