cookie

什么是cookie

Cookie 历来指就着牛奶一起吃的点心。然而，在因特网内，“Cookie”这个字有了完全不同的意思。那么“Cookie”到底是什么呢？“Cookie”是小量信息，由网络服务器发送出来以存储在网络浏览器上，从而下次这位独一无二的访客又回到该网络服务器时，可从该浏览器读回此信息。这是很有用的，让浏览器记住这位访客的特定信息，如上次访问的位置、花费的时间或用户首选项（如样式表）。Cookie 是个存储在浏览器目录的文本文件，当浏览器运行时，存储在 RAM 中。一旦你从该网站或网络服务器退出，Cookie 也可存储在计算机的硬驱上。当访客结束其浏览器对话时，即终止的所有 Cookie。

特点

• 每个cookie的大小不能超过4KB。
• 通过HTTP协议的方式来存储数据。
• cookie会影响同一域名下的根目录及其子目录。
• 同源政策。

cookie属性

cookie常用的属性有：
value
domain
path
expires
secure
HttpOnly

cookie实现

接下来想说说两种方式来实现cookie。一是原生javascript实现cookie，二是通过js-cookie这个小框架来实现cookie。

原生JavaScript实现数据存储

基本的cookie操作有三种：读取、写入和删除。javascript操作cookie主要是通过document.cookie来实现的。

document.cookie的一大特点是，可以读取所有的Cookie，但是每次写入cookie的时候只能一条一条写入。看一个从百度获取的cookie。

//读取cookie，一次性获取所有cookie。   
console.log(document.cookie);

//每个cookie都是以键值对的形式存在，并且通过；分隔。
"BAIDUID=9BD404162B2978E266B82B0D052A12D7:FG=1; BIDUPSID=605A0EB7E85170299BCFFF6C2B042840; PSTM=1474937533; BD_UPN=13314752; ispeed_lsm=6; BDRCVFR[Fc9oatPmwxn]=G01CoNuskzfuh-zuyuEXAPCpy49QhP8; BD_HOME=0; H_PS_PSSID=1440_21421_18240_21116_21454_21377_21526_21191_21399; BD_CK_SAM=1; PSINO=7; H_PS_645EC=9c44kg7jUnDfYs5vfqg9n3QbElgAvuf8phS5ZsmD2FIE2KxSARX534GRQw1z7f0cZ6wu; locale=zh; pgv_pvi=4703388672; pgv_si=s5301332992"

//写入cookie，只能一条一条写入。
document.cookie = 'unclekeith=21';
document.cookie = 'sex=boy';
...
原生javascript实现cookie的方法如下。此代码摘自《javascript高级程序设计 第三版》。

var CookieUtil = { 
    //读取cookie，判断某个cookie是否存在。
    //读取操作配合 unclekeith=21; sex=boy 这个cookie会更好理解读取cookie的操作。
    get: function (name){ 
        var cookieName = encodeURIComponent(name) + "=", 
            cookieStart = document.cookie.indexOf(cookieName), 
            cookieValue = null; 
        if (cookieStart > -1){ 
            var cookieEnd = document.cookie.indexOf(";", cookieStart); 
            if (cookieEnd == -1){ 
                cookieEnd = document.cookie.length; 
            } 
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); 
    } 
        return cookieValue; 
    }, 
    //写入cookie。
    set: function (name, value, expires, path, domain, secure) { 
        var cookieText = encodeURIComponent(name) + "=" + 
                         encodeURIComponent(value); 
        if (expires instanceof Date) { 
            cookieText += "; expires=" + expires.toGMTString(); 
        } 
        if (path) { 
            cookieText += "; path=" + path; 
        }   
        if (domain) { 
            cookieText += "; domain=" + domain; 
        } 
        if (secure) { 
            cookieText += "; secure"; 
        } 
        document.cookie = cookieText; 
    }, 
    //删除cookie
    unset: function (name, path, domain, secure){ 
        this.set(name, "", new Date(0), path, domain, secure); 
    } 
}; 

js-cookie

首先我想说的是，网上大量的资料都是对$.cookie进行介绍的。官网明确指出这个项目已经不再继续维护了。为什么还要使用阿？所以不再介绍。这里要介绍另外一个实现cookie的库。js-cookie。具体的api在官网上有详细的介绍。传送门：js-cookie