cookie知多少

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。

cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。

 Cookie 基础知识

说的通俗一点，cookie就是一个字符串，用来保存一些客户信息。

可以对其写入任何想写入的东西，只要不超过cookie的大小限制（4kb）。

cookie的操作办法最简单的说法就是对document.cookie进行操作（写入你要需保存的内容）。

cookie有一个关键字是expires，它是用来设置cookie的有效期的，默认情况（不设置expires）是当浏览器关闭的时候，自动清除cookie。

一般来说，cookie的形式都是这样的："cookieName1=cookie1;cookieName2=cookie2;expires=" + date，这里需要注意注意分号

";expires="之前的字符串你可以随便写，但是";expires="必须遵循这个写法，尤其是这个分号不能少，不然浏览器是认不出你的expires（过期时间），而把它当成cookie内容的一部分。

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

其实创建cookie的方式和定义变量的方式有些相似，都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ，而多个 cookie 可以存放在同一个cookie 文件中。

 Cookie常见问题

       1.cookie 存在两种类型：

            a)  你浏览的当前网站本身设置的 cookie

            b)  来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

      2.刚刚基础知识里面有说到 cookie 生命周期的问题，其实 cookie 大致可分为两种状态：

             a)  临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息，当浏览器关闭后这些信息也会从计算机中删除

             b)  设置失效时间的cookie。就算浏览器关闭了，这些信息业依然会在计算机中。如 登录名称和密码，这样无须在每次到特     定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年

     3.cookie 有两种清除方式：

            a)  通过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)

            b)  通过设置 cookie 的有效期来清除 cookie

            c)  注：删除 cookie 有时可能导致某些网页无法正常运行

     4.浏览器可以通过设置来接受和拒绝访问 cookie。

     5.出于功能和性能的原因考虑，建议尽量降低 cookie 的使用数量，并且要尽量使用小 cookie。

     6.关于cookie编码的细节问题将会在cookie高级篇中单独介绍。

     7.假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，可换一个浏览器。

 Cookie基础用法

一.Cookie设置

在使用JavaScript存取 cookie 时，必须要使用Document对象的 cookie 属性；一行代码介绍如何创建和修改一个 cookie ：

document.cookie="userId=88888; userName=lefan"

以上代码中'username'表示 cookie 名称，'lefan'表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。

注意:

在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存 储这些值呢?方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值 中，而且使用此种方案还可以避免中文乱码的出现。例如：

document.cookie="str="+escape("I love JavaScript");

　　相当于：

　document.cookie="str=I%20love%20ajax";

 　当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

 二.cookie的读取操作

下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：
var strcookie=document.cookie，精确的对 cookie 进行读取其实就是对字符串进行操作。用w3school上这段代码来做分析：

 1 function getCookie(c_name){
 2 　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
 3 　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
 4 　　　　　　if (c_start!=-1){ 
 5 　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
 6 　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
 7 　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
 8 　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
 9 　　　　　　} 
10 　　　　}
11 　　　　return ""
12 　　}　

　当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。

 三.设置cookie的有效期

　　文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

　　document.cookie = "name=value;expires=date"

　　上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

　　var _date = new Date();
　　_date.setDate(_date.getDate()+30);
　　_date.toGMTString();

　　上面三行代码分解为几步来看：

• 通过new生成一个Date的实例，得到当前的时间；
• getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；
• 接着通过setDate()方法来设置时间；
• 最后 用toGMTString()方法把Date对象转换为字符串，并返回结果

　　通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 - 从w3school复制下来的。创建一个在 cookie 中存储信息的函数：

1 　function setCookie(c_name, value, expiredays){
2 　　　　var exdate=new Date();
3 　　　　exdate.setDate(exdate.getDate() + expiredays);
4 　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
5 　　}
6  　　

     使用方法：setCookie('username','Darren',30) 

   　现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如：小时）来设置，那么改变第三行代码即可：

　　exdate.setHours(exdate.getHours() + expiredays);

　　这样设置以后的cookie有效期就是按照小时为单位的。

　　使 cookie 失效，通过把有效期的时间设置为一个已过期的时间，前面已经提到。下面继续cookie的路径与域。

 Cookie路径与域

  一.cookie 路径概念

默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie，可以被www.xxxx.com/html/b.html或www.xxx.com/ html/ some/c.html所访问，但不能被www.xxxx.com/d.html访问。

　为了控制cookie可以访问的目录，需要使用path参数设置cookie。 那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

　　document.cookie = "name=value;path=path"
　　document.cookie = "name=value;expires=date;path=path"

 　　例如，有一段Javascript询问了用户的姓名，你可能需要在你的另一个网页例如主页中访问一个给定的名字．所以你必须设定该cookie的路径．路径"path"用于设置可以读取一个cookie的最顶层的目录．将cookie的路径设置为你的网页最顶层的目录可以让该该目录下的所有网页都能访问该cookie．红色字体path就是 cookie 的路径，就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了:

　　document.cookie = "name=lefan;path=/"

指定可访问cookie的主机名

　　和路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

　　document.cookie="name=value; domain=cookieDomain";

　　以google为例，要实现跨主机访问，可以写为：

　　document.cookie="name=value;domain=.google.com";

 　这样，所有google.com下的主机都可以访问该cookie。

　二.cookie 域

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

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

　　红色的domain就是设置的 cookie 域的值。

　　例如 "www.google.com" 与 "sports.google.com" 公用一个关联的域名"google.com"，我们如果想让 "sports.google.com" 下的cookie被 "www.google.com" 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 "/"。例：

　　document.cookie = "username=Darren;path=/;domain=google.com"

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