cookie入門

據我對cookie誕生背景的瞭解，cookie是由網景公司創建的，目的就是將用戶的數據儲存在客戶端上。伴隨的HTML5的出現，現在又有另外一個解決數據離線儲存的方案，就是HTML5中的Web storage，其中兩個重要對象sessionStorage和localStorage可以解決瀏覽器sessions和長期儲存數據的目的，並且相容性還不錯，IE8+以上瀏覽器都支持。

那我們直接學習Web storage不就可以了？個人認為，這不是一個很好的學習方法。Web Storage的出現主要還是因為cookie的一些小毛病不能夠滿足前端工程師日常開發而被加入到HTML5中作為新的API的。本質上說，localStorage和sessionStorage實現的本質與cookie是一樣的。所以在接觸之前，先熟悉並且掌握cookie對於Web storage的學習還有很大的幫助。

這篇文章會涉及的內容與技術：

• module bundler：webpack
• javascirpt如何實現讀取，寫入，刪除Cookie
• js-cookie實現讀取，寫入，刪除Cookie

cookie定義

cookie其實就是伺服器保存在瀏覽器的一小段文本信息。怎麼保存呢？瀏覽器在向伺服器發送一個http請求時，會在發送請求的首部欄位中添加Cookie欄位，並且附上相應的key，value。伺服器接收到請求並且正確返迴響應的時候，會在響應的頭部欄位中添加Set-cookie欄位。這時候就完成了一次數據儲存的操作。當我們關閉瀏覽器並且再次打開的時候，相應需要存儲的信息就會在expires指定的期限記憶體儲下來。

簡單的說，就是：

• 當用戶訪問web頁面時，他的記錄可以保存在cookie中。
• 在用戶下一次訪問同一頁面時，可以在cookie中讀取用戶的訪問記錄。

cookie特點

• 每個cookie的大小不能超過4KB。
• 通過HTTP協議的方式來存儲數據。
• cookie會影響同一功能變數名稱下的根目錄及其子目錄。舉例來說，如果當前URI是keithchou.github.io，如果設置path為'/'或者不設置（預設值為/），這個cookie對該功能變數名稱的根路徑和它的所有子路徑都有效。如果path設置為/music，那麼這個cookie只有在訪問keithchou.github/music及其子路徑才有效。
• 同源政策。瀏覽器的同源政策規定，兩個網址只要功能變數名稱和埠相同，就可以共用cookie。註意，這裡不要求協議相同。也就是說，'http://keithchou.com'設置的cookie，可以被'https://keithchou.com'讀取。

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); 
    } 
}; 

javascript實現cookie的代碼並不複雜，只要有javascript基礎，基本上都可以看懂。給出原生javascript實現cookie的操作是因為要去實際的瞭解一下整個過程，不然使用前端大牛封裝好的庫來實現cookie總感覺有一些東西特別難以理解。

js-cookie

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

首先，進入本地項目，通過cnpm安裝js-cookie。

cnpm install js-cookie --save

然後，在使用webpack中的入口文件entry.js引入js-cookie。

import Cookies from 'js-cookie';

當然，接下來就可以使用了。下麵是一個登錄界面的小demo。

html部分
<p>
    <label for="username">用戶名：</label>
    <input type="text" id='username' name='username' placeholder="請輸入用戶名">
</p>
<p>
    <label for="password">密碼：</label>
    <input type="password" id='password' name='password' placeholder="請輸入密碼">
</p>
<p>
    <label for="confirm_password">再次輸入密碼：</label>
    <input type="password" id='confirm_password' name='confirm_password' placeholder="再次輸入密碼">
    <input type="checkbox" id='rememberUser'>
    <label for="rememberUser">記住用戶名</label>
</p>

//js部分
//先判斷瀏覽器是否儲存有對應的cookie。
if (Cookies.get('username')) {
    $("#username").val(Cookies.get('username'));
    $('#rememberUser').attr('checked',true);
};

if (Cookies.get('password')) {
    $('#password').val(Cookies.get('password'));
    $('#confirm_password').val(Cookies.get('password'));
}

//設置cookie。當點擊 記住用戶名 操作時儲存相應的數據。
$('#rememberUser').click(function(){
    if (this.checked) {
        if ($('#username').val() ==='') {
            alert('請輸入用戶名');
            this.checked = false;
        } else {
            Cookies.set('username',$('#username').val(),{
                path:'/',
                expires: 1
            });
            Cookies.set('password',$('#password').val(),{
                path:'/',
                expires: 1
            })
        }
    }
});