[JavaScript]cookie 详解

浏览数：32 / 时间：2015年06月08日

什么是cookie？

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

cookie操作

 1 var cookies = {  
 2         //读取cookie:字符串截取方法  
 3         getCookieByStr:function (c_name){  
 4             if (document.cookie.length>0){  
 5                 c_start=document.cookie.indexOf(c_name + "=");//检测是否存在对于的键值  
 6                 if(c_start!=-1){   
 7                     c_start=c_start + c_name.length+1; //返回等号后面一个字符索引，及对应字符开始位置  
 8                     c_end=document.cookie.indexOf(";",c_start);//从c_start位置开始搜索字符";"，返回字符的位置索引  
 9                     if (c_end==-1) {c_end=document.cookie.length;}//如果找不到字符";"，即只有一个cookie值  
10                     return unescape(document.cookie.substring(c_start,c_end)); //通过前后位置截取对于的cookie值，并解码  
11                 }   
12             }  
13             return ""; //不存在则返回空  
14         },  
15         //设置cookie--名称/值/过期天数  
16         setCookie:function(c_name,value,expiredays){  
17             var exdate=new Date();  
18             exdate.setDate(exdate.getDate()+expiredays);//设置日期  
19             document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
20         },  
21         //删除cookie  
22         delCookie:function(c_name){  
23             var exdate = new Date();  
24             exdate.setDate(exdate.getDate()-1);//昨天日期  
25             document.cookie = c_name+"=;expires="+exdate.toGMTString();  
26         }  
27     };

完整DEMO：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>Cookies</title>  
</head>  
<body>  
    <label for="key">cokie:<input type="text" name="key" id="cookieStr"></label>  
    <input type="button" id="add" value = "添加cookie" >  
    <input type="button" id="del" value = "删除cookie" >  
    <script type="text/javascript">  
    var cookies = {  
        //读取cookie:字符串截取方法  
        getCookieByStr:function (c_name){  
            if (document.cookie.length>0){  
                c_start=document.cookie.indexOf(c_name + "=");//检测是否存在对于的键值  
                if(c_start!=-1){   
                    c_start=c_start + c_name.length+1; //返回等号后面一个字符索引，及对应字符开始位置  
                    c_end=document.cookie.indexOf(";",c_start);//从c_start位置开始搜索字符";"，返回字符的位置索引  
                    if (c_end==-1) {c_end=document.cookie.length;}//如果找不到字符";"，即只有一个cookie值  
                    return unescape(document.cookie.substring(c_start,c_end)); //通过前后位置截取对于的cookie值，并解码  
                }   
            }  
            return ""; //不存在则返回空  
        },  
        //设置cookie--名称/值/过期天数  
        setCookie:function(c_name,value,expiredays){  
            var exdate=new Date();  
            exdate.setDate(exdate.getDate()+expiredays);//设置日期  
            document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
        },  
        //删除cookie  
        delCookie:function(c_name){  
            var exdate = new Date();  
            exdate.setDate(exdate.getDate()-1);//昨天日期  
            document.cookie = c_name+"=;expires="+exdate.toGMTString();  
        }  
    };  
  
    window.onload = function(){  
        document.getElementById(‘add‘).onclick = function(){  
            var value = document.getElementById(‘cookieStr‘).value;  
            if(value){  
                cookies.setCookie(‘cookie‘,value,10);  
            }  
            document.getElementById(‘cookieStr‘).value="";  
            alert(document.cookie);  
        };  
        document.getElementById(‘del‘).onclick = function(){  
            cookies.delCookie(‘cookie‘);  
            alert("cookie已删除：cookie="+document.cookie);  
        }  
    }  
    </script>  
</body>  
</html>

编码和解码
escape() 函数

----可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

unescape()

---- 函数可对通过 escape() 编码的字符串进行解码。

扩展：

小型框架---完整cookies读写，完全支持Unicode

var docCookies = {  
  getItem: function (sKey) {  
    if (!sKey) { return null; }  
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;  
  },  
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {  
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }  
    var sExpires = "";  
    if (vEnd) {  
      switch (vEnd.constructor) {  
        case Number:  
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;  
          break;  
        case String:  
          sExpires = "; expires=" + vEnd;  
          break;  
        case Date:  
          sExpires = "; expires=" + vEnd.toUTCString();  
          break;  
      }  
    }  
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");  
    return true;  
  },  
  removeItem: function (sKey, sPath, sDomain) {  
    if (!this.hasItem(sKey)) { return false; }  
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");  
    return true;  
  },  
  hasItem: function (sKey) {  
    if (!sKey) { return false; }  
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);  
  },  
  keys: function () {  
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);  
    for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }  
    return aKeys;  
  }  
};