cookie

cookie

cookie是指web浏覽器儲存的少量資料，同時也是與具體頁面有關的。

cookie會自動在web伺服器和web浏覽器中傳輸。

cookie 是用來儲存狀态的。即使用者登入，一個網站如何判斷使用者登入的時候，會直接通過從用戶端接收到的cookie來擷取的。

cookie 屬性，有效期和作用域

除了名(name)和值(value),cokie持續有效時間很短，隻能持續在web浏覽器的會話期間。一旦使用者關閉浏覽器，使用者儲存的資料就全部丢失。cookie需要設定有效期。即設定max-age屬性，通過設定其屬性完成對cookie有效期的設定。

設定了有效期以後，cookie資料會儲存在一個檔案中，直到過了指定的有效期才會删除檔案。

cookie擁有作用域，其作用域是通過文檔源和文檔路徑設定的。預設情況下，cookie和建立其的web頁面有關。并對同目錄和其子目錄的其他web頁面可見。對父級目錄不可見。

一個栗子，當使用者在頁面輸入了其電子郵件位址，需要儲存下來，這個時候希望整個網站都使用其電子郵件位址，這個時候，通過設定cookie中的path屬性即可實作作用域為全部。

如果将路徑設定為/ 即讓cookie和localStorage擁有同樣的作用域。同時當其請求該站點上的任何一個web頁面的時候，浏覽器都必須将cookie的名字和值傳遞給伺服器。

這裡需要注意一點的是，如果一個web頁面，想要讀取其他頁面的cookie，隻需要随便加載一個頁面，并使用iframe标簽，即可讀取對應文檔的cookie，此操作受到同源的限制。

如果需要子域名之間能共享cookie此時需要設定cookie的domain 如果沒有為一個cookie設定域屬性，那麼domain屬性的預設值為目前web伺服器的主機名。

cookie的另外一個屬性為secure 其為布爾值，用來表明通過哪種網絡傳遞。cookie預設是不安全的傳遞，即可以通過http傳遞，一旦設定為true的時候，必須通過https進行傳遞。

總結

名稱	含義
Name	儲存的名稱
Value	值
Domain	用于域的共享，實作子域的互通
Path	設定cookie的路徑
secure	表明cookie是否以不安全的方式傳遞

儲存cookie

cookie為鍵值對。

即需要按照以下的字元串進行設定

name = value           

如下所示

document.cookie = "version=" + encodeURIComponent(document.lastModified);           

由于cookie中儲存的不允許包含分号，逗号，空白符，是以在儲存前使用encodeURIComponent()核心函數進行編碼，解碼的時候使用encodeURIComponent()函數解碼

和POST中的請求體類似。

如果設定天數，需要按照以下的字元串進行設定

name = value; max-age = seconds           

下面的函數是設定一個cookie的值

// 以名/值的形式儲存cookie
// 同時采用JavaScript核心函數encodeURIComponent()函數進行對值的編碼
// daysToLive的值為天
function setcookie(name, value, daysToLive) {
    var  cookie = name + "=" + encodeURIComponent(value);
    // 如果傳入的天數為數字格式的
    if (typeof daysToLive === "number") 
        cookie +=  "; max-age=" + (daysToLive*60*60*24);    // 由于上一個已經是一條，需要使用； 來作為結束
    document.cookie = cookie;    // 将字元串傳入cookie
}           

同樣的如果想要 繼續設定cookie的值，還需要繼續在後面加上值

; path = path
; omainn = domain
; secure           

如果要删除cookie，需要設定同樣名字的即可完成。

讀取cookie

因為讀取的是一個字元串，是以需要使用split()方法将cookie的值中的名值對進行分離。使用JSON.parse()将其轉化為JSON對象

// 将docuemnt.cookie 的值以名值對組成的一個對象傳回
// 假設儲存cookie的值的時候是采用encodeURIComponent()函數進行編碼的
function getcookie() {
    var cookie = {};    // 初始化要儲存的對象
    var all = document.cookie;    // 在一個字元串中擷取cookie的值
    if (all === "") 
        return cookie;    // 如果傳回的是一個空對象
    var list = all.split(";");    // 進行分離
    for(var i = 0; i < list.length; i++) {
        var cookie = list[i];    
        var p = cookie.indexOf("=");    // 查詢第一個=
        var name = cookie.substring(0, p);    // 擷取cookie的名字
        var value = cookie.substring(p+1);    // 擷取cookie對應的值
        value = decodeURIComponent(value);    // 對其值進行解碼
        cookie[name] = value;    // 将名/值對儲存到對象中
    }
    return cookie;    // 傳回cookie
}           

cookie的局限性

對cookie數量，大小有限制。