在 Javascript 中使用 Cookie

什么是Cookie？

所谓 Cookie，是网页通过浏览器保存在用户本地计算机上的一小段数据。用户再次访问该网页的时候，浏览器会将这一小段数据发送给该网页。Cookie 是网景公司的前雇员 Lou Montulli 在1993年3月的发明。

Cookie 最典型的应用是判定注册用户是否已经登录网站。用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，也就是所谓"保存登录信息" 或"记住我"，这些所谓"记忆"都是用 Cookie 保存的。另一个重要应用场合是"购物车" 之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，网页把这些信息会写入 Cookie，以便在最后付款时提取信息。

Cookie里面都有些什么？

Cookie 一般包含至少下面3项内容。

• 具体数据的名称和值
• 过期日
• 针对网页的域名和路径

如果没有指定过期日，Cookie 在浏览器关闭时过期；如果想 Cookie 永不过期，就把过期日指定为当前日期加上一万年好了(^_*)。

Cookie究竟有多大？

根据 Internet 标准 RFC 2109, HTTP State Management Mechanism，

• 每个Cookie可以有4096字节(4KB)
• 一个浏览器至少保存300个Cookie
• 一个站点的Cookie数量不超过20个

当然，不同浏览器可以有自己的设置，可以放宽上面的这些。上面的只是最小。

如何在Javascript中使用Cookie

在 Javascript 中，可以通过 document.cookie 这个属性来操作 Cookie 的。这个属性的操作方法有些特异之处，增加、删除 Cookie 都是通过对这个属性的赋值实现；而读取这个属性的值，会得到所有的 Cookie 合并在一起的字符串；如果要取某一个名字的 Cookie，需要解析这个 Cookie 字符串。下面列出常用的3个函数。

function SetCookie(name, value, expires, path, domain, secure) {
  var today = new Date();
  today.setTime(today.getTime());
  if(expires) { expires *= 86400000; }
  var expires_date = new Date(today.getTime() + (expires));
  document.cookie = name + "=" + escape(value)
    + (expires ? ";expires=" + expires_date.toGMTString() : "")
    + (path ? ";path=" + path : "")
    + (domain ? ";domain=" + domain : "")
    + (secure ? ";secure" : "");
}

function GetCookie(name) {
  var cookies = document.cookie.split( ';' );
  var cookie = '';
  for(var i=0; i<cookies.length; i++) {
    cookie = cookies[i].split('=');
    if(cookie[0].replace(/^\s+|\s+$/g, '') == name) {
      return (cookie.length <= 1) ? "" : unescape(cookie[1].replace(/^\s+|\s+$/g, ''));
    }
  }
  return null;
}

function DelCookie(name, path, domain) {
  document.cookie = name + "="
    + (path ? ";path=" + path : "")
    + (domain ? ";domain=" + domain : "")
    + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

这3个函数中，

• SetCookie 保存一个Cookie。参数中除了name 和 value 以外，其他可以省略。
• GetCookie 通过一个Cookie的名字取出它的值。
• DelCookie 删除一个Cookie，也就是让一个Cookie立刻过期。参数中除了name，其他可以省略。

可以用下面的代码进行一个简单的测试。

SetCookie("username", "zenyoubin");
alert(GetCookie("username"));
DelCookie("username");
alert(GetCookie("username"));

勘误

对于上述的 GetCookie 函数，互联网上还流传这另外一种写法的代码如下。

function Get_Cookie(name) {
  var start = document.cookie.indexOf(name + "=");
  var len = start + name.length + 1;
  if((!start) && (name != document.cookie.substring(0, name.length))) {
    return null;
  }
  if(start == -1) {return null;}
  var end = document.cookie.indexOf(";", len);
  if(end == -1) {end = document.cookie.length;}
  return unescape(document.cookie.substring(len, end));
}

互联网上很多 Javascript 读取 Cookie 的代码和上面这段代码都有相同的思路。这段代码是有错误的，如果两个不同的Cookie，一个名字是另一个名字前面增加几个字符，例如一个叫 username、另外一个叫 name，用上面的函数就不一定能得到正确的Cookie值。