一文讀懂Cookie

cookie

cookie是一些數據，存儲於你電腦上的文本文件中，當web服務器向瀏覽器發送web頁面時，連接關閉之後，服務端並不會記錄用戶的信息，此時cookie的作用便是用於解決“如何記錄客戶端的用戶信息”。即讓這些信息變得持久化，簡單來說：

• 當用戶訪問web頁面時，名字可以記錄在cookie中
• 在用戶下一次訪問該頁面時，可以從cookie中讀取訪問記錄

cookie以鍵值對的形式進行存儲。記錄密碼功能便是一種cookie + session的應用。

應用：

• 保存用戶登陸狀態，將用戶sessionid存儲在cookie之中，下次訪問該頁面就不需要重新登陸，常用過期時間包括：一個月、三個月、一年。
• 跟蹤用戶行爲，如天氣預報網站針對特定用戶展示特定信息。
• 定製頁面

缺點：

• 可被禁用
• 與瀏覽器相關，跨瀏覽器不可互相訪問
• 可被刪除
• 安全性不高

創建cookie很簡單，只需要這樣：

document.cookie = "userID=husen"

這樣便創建了一個名爲userID的cookie。

需要注意的是：cookie的鍵和值均不能使用分號、逗號、等號以及空格，因此我們常常需要對值使用escape函數編碼，將特殊符號使用十六進制表示，從而可以存儲到cookie之中，避免中文亂碼。即：

document.cookie = "userID2=" + escape("Cookie Testing")

當使用escape編碼後，取出值需要用unescape進行解碼。

獲取cookie值只需要執行document.cookie即可。如：

console.log(document.cookie)
// 輸出
userID=828; userID2=Cookie%20Testing

因此我們如果想要獲得特定的鍵對應的值，需要對該字符串進行解析。下面我們獲取userID2對應的值。

// 設置cookie
document.cookie = "userID=husen"
// escape()函數
document.cookie = "userID2=" + escape("Cookie Testing")

console.log(document.cookie)
var cookies = document.cookie.split("; ");
var userID2 = "";
for (var i = 0; i < cookies.length; i++) {
     var arr = cookies[i].split("=")
     if ("userID2" == arr[0]) {
           userID2 = unescape(arr[1])
           break
     }
}
console.log(userID2)

下面爲cookie設置終止日期。可以用下面的選項進行實現：

document.cookie="userID=husen;expiress=GMT_String"

如果要將cookie設置爲10天后過期，可以這樣實現：

// 設置過期時間爲10天
var date = new Date()
var expires = 10
date.setTime(date.getTime() + expires * 24 * 3600 * 1000)
document.cookie = "userID=husen;expires=" + date.toGMTString()

刪除cookie：設置過期時間爲一個過去的時間即可。

通過指定path屬性，我們可以指定可訪問cookie的路徑。如：

document.cookie="userId=husen; path=/test";

表示cookie僅在test目錄下可使用。

下面對cookie進行代碼封裝，實現增刪改查：

增加：

function addCookie(key, value, expires = 0) {
    var cookieStr = key + "=" + escape(value)
    if (expires > 0) {
        var date = new Date()
        date.setTime(date.getTime() + expires * 24 * 3600 * 1000)
        cookieStr = cookieStr + "; expires" + date.toGMTString();
    }
    document.cookie = cookieStr;
}

刪除：

function deleteCookie(key) {
    var date = new Date();
    date.setTime(date.getTime() - 10000);
    document.cookie = key + "= over; expires=" + date.toGMTString();
}

**更新：**和增加一樣

查詢：

function getCookie(key) {
    var cookies = document.cookie.split("; ");
    var value = "";
    for (var i = 0; i < cookies.length; i++) {
        var arr = cookies[i].split("=")
        if (key == arr[0]) {
            value = unescape(arr[1])
            break
        }
    }
    return value
}