什么是cookie

Cookie 歷來指就著牛奶一起吃的點心。然而，在因特網(wǎng)內(nèi)，“Cookie”這個字有了完全不同的意思。那么“Cookie”到底是什么呢？“Cookie”是小量信息，由網(wǎng)絡(luò)服務(wù)器發(fā)送出來以存儲在網(wǎng)絡(luò)瀏覽器上，從而下次這位獨一無二的訪客又回到該網(wǎng)絡(luò)服務(wù)器時，可從該瀏覽器讀回此信息。這是很有用的，讓瀏覽器記住這位訪客的特定信息，如上次訪問的位置、花費的時間或用戶首選項（如樣式表）。Cookie 是個存儲在瀏覽器目錄的文本文件，當(dāng)瀏覽器運行時，存儲在 RAM 中。一旦你從該網(wǎng)站或網(wǎng)絡(luò)服務(wù)器退出，Cookie 也可存儲在計算機的硬驅(qū)上。當(dāng)訪客結(jié)束其瀏覽器對話時，即終止的所有 Cookie。

特點

• 每個cookie的大小不能超過4KB。
• 通過HTTP協(xié)議的方式來存儲數(shù)據(jù)。
• cookie會影響同一域名下的根目錄及其子目錄。
• 同源政策。

cookie屬性

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

cookie實現(xiàn)

接下來想說說兩種方式來實現(xiàn)cookie。一是原生javascript實現(xiàn)cookie，二是通過js-cookie這個小框架來實現(xiàn)cookie。

原生JavaScript實現(xiàn)數(shù)據(jù)存儲

基本的cookie操作有三種：讀取、寫入和刪除。javascript操作cookie主要是通過document.cookie來實現(xiàn)的。

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實現(xiàn)cookie的方法如下。此代碼摘自《javascript高級程序設(shè)計 第三版》。

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

首先我想說的是，網(wǎng)上大量的資料都是對$.cookie進行介紹的。官網(wǎng)明確指出這個項目已經(jīng)不再繼續(xù)維護了。為什么還要使用阿？所以不再介紹。這里要介紹另外一個實現(xiàn)cookie的庫。js-cookie。具體的api在官網(wǎng)上有詳細(xì)的介紹。傳送門：js-cookie