JavaScript Cookies

Cookie 讓您在網頁中存儲用戶信息。

什么是 cookie？

Cookie 是在您的計算機上存儲在小的文本文件中的數據。

當 web 服務器向瀏覽器發送網頁后，連接被關閉，服務器會忘記用戶的一切。

Cookie 是為了解決“如何記住用戶信息”而發明的：

  • 當用戶訪問網頁時，他的名字可以存儲在 cookie 中。
  • 下次用戶訪問該頁面時，cookie 會“記住”他的名字。

Cookie 保存在名稱值對中，如：

username = Bill Gates

當瀏覽器從服務器請求一個網頁時，將屬于該頁的 cookie 添加到該請求中。這樣服務器就獲得了必要的數據來“記住”用戶的信息。

如果瀏覽器已關閉本地 cookie 支持，則以下實例均無法工作。

通過 JavaScript 創建 cookie

JavaScript 可以用 document.cookie 屬性創建、讀取、刪除 cookie。

通過 JavaScript，可以這樣創建 cookie：

document.cookie = "username=Bill Gates";

您還可以添加有效日期（UTC 時間）。默認情況下，在瀏覽器關閉時會刪除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通過 path 參數，您可以告訴瀏覽器 cookie 屬于什么路徑。默認情況下，cookie 屬于當前頁。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通過 JavaScript 讀取 cookie

通過 JavaScript，可以這樣讀取 cookie：

var x = document.cookie;

document.cookie 會在一條字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通過 JavaScript 改變 cookie

通過使用 JavaScript，你可以像你創建 cookie 一樣改變它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

舊 cookie 被覆蓋。

通過 JavaScript 刪除 cookie

刪除 cookie 非常簡單。

刪除 cookie 時不必指定 cookie 值：

直接把 expires 參數設置為過去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您應該定義 cookie 路徑以確保刪除正確的 cookie。

如果你不指定路徑，一些瀏覽器不會讓你刪除 cookie。

Cookie 字符串

document.cookie 屬性看起來像一個正常的文本字符串。但它不是。

即使你向 document.cookie 寫一份完整的 cookie 字符串，當再次讀取時，你只能看到它的名稱-值對。

如果設置了新 cookie，則舊的 cookie 不會被覆蓋。新的 Cookie 會被添加到 document.cookie，所以如果你讀取 document.cookie，你得到的東西會像這樣：

cookie1 = value; cookie2 = value;
     

如果你想找到一個指定 cookie 的值，你必須編寫 JavaScript 函數來搜索 cookie 字符串中的 cookie 值。

JavaScript Cookie 實例

在下面的示例中，我們將創建一個 cookie 來存儲訪問者的名稱。

訪客第一次到達網頁時，會要求他填寫姓名。然后將該名稱存儲在 cookie 中。

下次訪客到達同一頁時，他將收到一條歡迎消息。

例如，我們將創建 3 個JavaScript函數：

  1. 設置 cookie 值的函數
  2. 獲取 cookie 值的函數
  3. 檢查 cookie 值的函數

設置 cookie 的函數

首先，我們創建一個函數，將訪問者的名字存儲在 cookie 變量中：

實例

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

例子解釋：

上面這個函數的的參數是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 過期的天數（exdays）。

通過把 cookie 名稱、cookie 值和過期字符串相加，該函數就設置了 cookie。

獲取 cookie 的函數

然后，我們創建一個函數返回指定 cookie 的值：

實例

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

函數解釋：

把 cookie 作為參數（cname）。

創建變量（name）與要搜索的文本（CNAME”=”）。

解碼 cookie 字符串，處理帶有特殊字符的 cookie，例如 “$”。

用分號把 document.cookie 拆分到名為 ca（decodedCookie.split(';')）的數組中。

遍歷 ca 數組（i = 0; i < ca.length; i++），然后讀出每個值 c = ca[i]。

如果找到 cookie（c.indexOf(name) == 0），則返回該 cookie 的值（c.substring(name.length, c.length）。

如果未找到 cookie，則返回 ""。

檢測 cookie 的函數

最后，我們創建檢查 cookie 是否設置的函數。

如果已設置 cookie，將顯示一個問候。

如果未設置 cookie，會顯示一個提示框，詢問用戶的名字，并存儲用戶名 cookie 365 天，通過調用 setCookie 函數：

實例

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

現在組合起來

實例

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

親自試一試

上面的例子會在頁面加載后運行 checkCookie() 函數。