js中的cookie使用和vue-cookie的使用

在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就对了。