关于浏览器cookie的那些事儿

昨天接到一个小需求，就是在ipad上访问某页面，页面顶部出现一个下载客户端的提示，点击关闭按钮后，提示信息消失，信息存入cookie，在cookie未过期之前，除非用户自己清除浏览器的cookie，否则此提示信息不再显示。像类似这样的需求非常常见，而网站上使用cookie技术也比比皆是。今天就抽空整理下关于浏览器cookie的那些事儿。有些信息一笔带过，未做详细描述。如描述当中有错误，欢迎大家指出。

1. Cookie介绍

　　cookie的传递流程是用户在访问站点时，服务器端生成cookie，发送给浏览器端储存，当下次再访问时浏览器会将该网站的cookie发回给服务器端，服务器端根据cookie信息显示特定的内容。简而言之就是浏览器端会储存你在这个站点的一些信息，比如登录状态，用户ID，密码、浏览过的网页、停留的时间等信息，记录在cookie里，方便下次访问时发送给服务器端。因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式web应用程序的实现。服务器可以设置或读取cookie中的信息，借此维护用户跟服务器会话中的状态。

　　cookie的使用也很普遍，比如说在电商网站中，用户挑选了商品后，商品信息会记录在cookie里，然后在购物车页面读取cookie里的商品内容。再比如当用户登录一个网站时，如果用户勾选了下次自动登录，则发送登录请求时，服务器会发送包含登录凭据（用户名和密码被加密过）的cookie到用户的硬盘上，则下次登录时，浏览器会发送该cookie到服务器端验证，这次用户不必输入用户名和密码就可以直接登录了。另外网站还可以利用cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，访问了页面的哪块信息，在每个网页的停留时间等。利用这些信息，一方面是可以为用户提供个性化的服务，另一方面，也可以作为了解所有用户行为的工具，对于网站经营策略的改进有一定参考价值。

　　cookie是保存在客户端中，分为内存cookie和硬盘cookie。内存cookie由浏览器维护，保存在内存中，浏览器关闭就失效。硬盘cookie的存在时间长，有个过期时间，除非手工清理或是到了过期时间，否则不会删除，将过期时间设置为0或负值，这样在关闭浏览器时，cookie同样失效。

　　cookie的大小限制在4kb左右，所以存放的内容不是很多。cookie在网络中的应用也有一些弊端，比如会影响到用户的隐私，安全，以及根据用户的浏览记录投放垃圾广告，给用户造成困扰等。

2. Cookie脚本设置

既然cookie在网站中也有不少用处，那如何设置cookie呢？下面简单介绍下利用JS如何设置cookie。

大致思路为：先读取document.cookie字符串，保存在自定义的cookie对象里，读取通过操作自定义的cookie对象来完成，删除，添加通过重写document.cookie字符串来操作。

 <script>
 var __cookies = {},                 // cookie数据缓存
     __date = new Date(),            // cookie涉及的时间处理对象
     __currentms = __date.getTime(), // 当前时间值
     __milliseconds = 24*60*60*1000; // 一天的毫秒数值  

 /* 取得cookie字符串
  *  @param  {String} _key     KEY值
  *  @param  {String} _value   指定的值
  *  @param  {String} _domain  域
  *  @param  {Number} _expires 过期时间偏移，单位天
  *  @param  {String} _path    路径
  */
 var __getCookieStr = function(_key,_value){
     if(arguments[3]) __date.setTime(__currentms + arguments[3]*__milliseconds);
     var _path = arguments[4]?('path='+arguments[4]+';'):'',
         _expires = arguments[3]?('expires='+__date.toGMTString()+';'):'',
         _domain = arguments[2]?('domain='+arguments[2]+';'):'';
     return _key+'='+_value+';'+_domain+_expires+_path;
 }; 

 /*
  * 添加cookie信息，如果KEY已存在则覆盖原先内容
  * @param  {String} _key     KEY值
  * @param  {String} _value   指定的值
  * @param  {String} _domain  域
  * @param  {Number} _expires 过期时间偏移，单位天
  * @param  {String} _path    路径
  * @return {Void}
  */
 _$setCookie = function(_key,_value){
     document.cookie = __getCookieStr.apply(null,arguments);
     __cookies[_key] = _value;
 };

 /* 获取cookie，根据key值获取 */
 _$getCookie = function(_key){
     return __cookies[_key]||'';
 };

 /*
  * 删除cookie
  * @param  {String} _key     要删除cookie的KEY值
  * @param  {String} _domain  域
  * @param  {String} _path    路径
  * @return {Void}
  */
 _$delCookie = function(_key){
     document.cookie = __getCookieStr(_key,'',arguments[1],-100,arguments[2]);
     delete __cookies[_key];
 };

 /* 刷新cookie */
 _$refreshCookie = function(){
     var _arr = document.cookie.split(/\s*\;\s*/);
     for(var i=0,l=_arr.length;i<l;i++){
         __cookies[_arr[i].substring(0,_arr[i].indexOf('='))] = _arr[i].substring(_arr[i].indexOf('=')+1);
     }
 };

 // init
 _$refreshCookie();
 </script>