JavaScript Cookie

在说cookie以前，先来看两个例子。

例子 1：若是常常上网，会发现不少网站都有一个功能，下次自动登陆，或者一个月内免登陆，只要咱们不点击“退出”按钮，一段时间后再回到该网站，发现依然在线。这个功能很实用，避免了屡次登陆带来的不便。

例子 2：目前的互联网，不少网站都是靠百度联盟和谷歌联盟的广告来盈利，细心地朋友可能会发现，这些广告都有跟踪功能，咱们须要什么服务就显示什么广告。好比，你正在准备考研，在百度搜索了不少与考研有关的信息，浏览了不少与考研有关的网站，当你再次浏览一个与考研无关的网站时，这个网站上显示的倒是考研的广告，咱们很惊讶的发现，百度太聪明了。

这两个例子是常常见到的，都是 cookie 在发挥做用。没有 cookie ，这些功能实现起来很困难，甚至没法实现。

什么是 cookie

有时候，服务器须要保存用户的信息，这些信息最好放在用户的电脑上，并可以让服务器获取。例如自动登陆功能的实现，须要将用户名和密码保存在本地，下次访问网站时，再将用户名和密码发送到服务器进行验证，验证经过后自动登陆，不然不能登陆。

这些服务器在用户电脑上保存的信息，就叫 cookie 。

cookie 保存在用户的电脑上，当再次访问相应网站时，浏览器会把 cookie 一块儿发送到服务器，让服务器进行处理。

cookie 能够由服务器端程序（PHP、ASP、JSP、Python）生成，也能够由客户端脚本（JavaScript）生成。服务器生成的 cookie 会添加到 http 报头，随 http 请求发送给浏览器，浏览器再把它保存成本地的文件；JavaScript生成的 cookie 直接由浏览器保存在本地文件。

cookie 也是随 http 请求发送给服务器的，当浏览器发送 http 请求时，会将 cookie 添加到 http 请求的报头发送到服务器，再由服务器进行处理。

为何须要 cookie

HTTP协议是无状态的，对于一个浏览器发出的屡次请求，服务器没法区分是否是来源于同一个浏览器，须要额外的数据来辨认，cookie 正是这样的一段随HTTP请求一块儿被传递的额外数据。

cookie能作什么

cookie 只是一段文本，因此它只能保存字符串。并且浏览器对它有大小限制以及 它会 随着每次请求被发送到服务器，因此应该保证它不要太大。 Cookie的内容也是明文保存的，有些浏览器提供界面修改，因此， 不适合保存重要的或者涉及隐私的内容。

cookie 的限制

大多数浏览器支持最大为 4096 字节的 Cookie。 因为这限制了 Cookie 的大小，最好用 Cookie 来存储少许数据，或者存储用户 ID 之类的标识符。用户 ID 随后即可用于标识用户，以及从数据库或其余数据源中读取用户信息。 浏览器还限制网站能够在用户计算机上存储的 Cookie 的数量。 大多数浏览器只容许每一个网站存储 20 个 Cookie；若是试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。有些浏览器还会对它们将接受的来自全部站点的 Cookie 总数做出绝对限制，一般为 300 个。

cookie 的形式

cookie 是以 键/值 对的形式存在的，每一个“ 变量 ”对应一个值，相互之间以分号隔开，以下所示：
username=itxueyuan;password=123456;age=22

总结：cookie一般用来保存服务器的信息（或者说维持会话），由服务端程序或者JavaScript脚本写入，在后续请求中，供服务器读取。

修改和删除cookie

 JavaScript 经过 document.cookie 来修改和删除 cookie 。

JavaScript 在设置 cookie 时会遵循这样一条原则：新设置的 cookie 若是与原有的 cookie 相同（名称、路径和域名都相同），会将原有的 cookie 覆盖（采用新 cookie） 。

这就给咱们提供了一种修改和删除 cookie 的方法——直接覆盖原有的 cookie 。

例如，有这样一个 cookie：
username=itxueyuan;expire=1369929124191;path=/;domain=www.itxueyuan.org
将用户名修改成“JavaScript”，并设置一天后过时：

var date=new Date();
var cookieExpire=date.getTime()+24*3600*1000;
// 修改 cookie 时，名称、路径和域名必须相同
document.cookie=" username=JavaScript  ; expire= "
     + cookieExpire + " ;path=/;domain=www.itxueyuan.org ";

删除该cookie

var date=new Date();
var cookieExpire=date.getTime()-1000; // 设置为一个过去的时间/
/ 删除 cookie 时，名称、路径和域名必须相同
document.cookie=" username=JavaScript  ; expire= " 
    + cookieExpire + " ;path=/;domain=www.itxueyuan.org ";

注：为了删除一个cookie，能够将其过时时间设定为一个过去的时间

JavaScript设置cookie

在JavaScript中，使用 document.cookie 来设置 cookie 。

语法：
      document.cookie=" name=value ; expire=GMT_String ; path=cookieDir ; domain=cookieDomain "
对cookie格式的说明

键/值 对	说明
name=value	必需。设置cookie的名称和值，一次只能设置一个。 在cookie的名称或值中不会出现分号( ; )、逗号( , )、等号( = )、空格以及中文等，不然将会被浏览器编码。在cookie的名称中作到这点很容易（名称通常是开发人员设定好的），可是保存的值是不肯定的，如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而能够存储于cookie值 中，并且使用此种方案还能够避免中文乱码的出现。 例如，将“小明”存入cookie： document.cookie="username="+eacape("小明");
expire=GMT_String	可选。设置cookie的过时时间。 默认状况下（不设置expire），用户关闭浏览器时会销毁cookie，这些cookie仅仅是存储在内存中，而没有创建相应的硬盘文件。在实际开发中，cookie 一般须要长期保存，例如保存用户登陆的状态，能够经过设置 cookie 的过时时间来实现。 过时时间是以GMT格式表示的时间字符串，超过这个时间，cookie将消失，不可访问。 例如，若是要将cookie设置为10天后过时： var date=new Date();  //  更多请参考 JavaScript Date 对象 var expireDays=10; date.setTime(date.getTime()+expireDays*24*3600*1000);
path=cookieDir	可选。设置cookie的有效路径。 默认状况下（不设置path），cookie只在当前路径下有效，路径范围以外不能访问该cookie。例如，在 /javascript/jiaocheng/ 路径下设置的cookie，只能被 /javascript/jiaocheng/ 路径下的文件以及子目录下的文件访问。 要使 cookie 全站有效，请设置 path=/ 。
domain=cookieDomain	可选。设置cookie的有效域名。 默认状况下（不设置 domain），cookie 只在当前域名下有效。例如，在 demo.itxueyuan.org 下设置的 cookie ，不能在 javascript.itxueyuan.org 域名下访问。 要使 cookie 在 itxueyuan.org 的全部二级域名和主域名下都有效，请设置domain=.itxueyuan.org

请看下面几个设置 cookie 的例子。

最简单的 cookie 设置：

document.cookie=" name=xiaoming ";

对 cookie 的值进行 escape() 编码：

var cookieValue=" 小明 ";
document.cookie=" name= "+escape(cookieValue) ;

设置有效路径为全站有效：

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

设置过时时间为 1 天：

var date=new Date(); // 建立日期对象
var cookieExpire=date.getTime()+24*3600*1000; // 以微妙计算document.cookie=" name=xiaoming ; expire= "+cookieExpire;

举例，将IT学院会员的用户名和密码保存到cookie，过时时间一个月，全站有效，全部域名有效：

var username="小明";
var password="123456";
var expire=(new Date()).getTime()+1000*3600*24*30;
document.cookie = " username=" + escape(username) 
    + " expire=" +    expire + " ; path=/ ; domain=.itxueyuan.org ";
document.cookie = " password=" + escape(password) 
    + " expire=" +   expire + " ; path=/ ; domain=.itxueyuan.org ";

JavaScript获取cookie

JavaScript 经过 document.cookie 来获取 cookie 。

遗憾的是，document.cookie 只能获取全部 cookie 的集合，不能获取单个 cookie 。

例如，获取当前cookie集合：

<input id="demo1" type="button" value="获取cookie" />
<script type="text/javascript">
  document.getElementById("demo1").onclick=function(){
    alert(document.cookie);
  }
</script>

咱们能够自定义一个函数来获取单个 cookie 的值。

咱们知道，cookie 集合的格式是这样的：
name1=value1 ; name2=value2 ; name3=value3 ; ...
将 cookie 以分号（;）分组，再以等号（=）分组，就能获得每一个 cookie 的名称和值。

/** *  func  getCookie()  获取单个cookie的值 *  pram  cookieName  cookie的名称**/
function getCookie(cookieName){
  var cookieObj={},cookieSplit=[],// 以分号（;）分组      cookieArr=document.cookie.split(";");
  for(var i=0,len=cookieArr.length;i<len;i++)
   if(cookieArr[i]) {// 以等号（=）分组
    cookieSplit=cookieArr[i].split("=");
    // Trim() 是自定义的函数，用来删除字符串两边的空格
    cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
   }
   return cookieObj[cookieName];
}

例如，获取 name 的值：

getCookie["name"];

对上面的代码稍做修改，就可将 cookie 的值保存为对象的属性，使用时很是方便。代码以下：

/** *  func  getCookieObj()  获取全部cookie的值并将其保存为对象的属性**/
function getCookieObj(){
  var cookieObj={},cookieSplit=[],          // 以分号（;）分组
  cookieArr=document.cookie.split(";");
  for(var i=0,len=cookieArr.length;i<len;i++)
    if(cookieArr[i]) {            // 以等号（=）分组
       cookieSplit=cookieArr[i].split("=");            
     // Trim() 是自定义的函数，用来删除字符串两边的空格
      cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
    }
  return cookieObj;
}

例如，获取 name 的值：

var cookieObj=getCookieObj();
cookieObj.name;