摘要：如果您的瀏覽器已關(guān)閉本地支持，則以下示例均無效。刪除時(shí)，不必指定值。但事實(shí)并非如此。訪問者第一次到達(dá)網(wǎng)頁時(shí)，將要求他她填寫他她的姓名。檢查的功能最后，我們創(chuàng)建一個(gè)函數(shù)來檢查是否設(shè)置了。

Cookie是計(jì)算機(jī)上存儲(chǔ)在小文本文件中的數(shù)據(jù)。當(dāng)Web服務(wù)器將網(wǎng)頁發(fā)送到瀏覽器時(shí)，連接將關(guān)閉，服務(wù)器將忘記用戶的所有內(nèi)容。發(fā)明Cookie是為了解決“如何記住用戶信息”的問題：
當(dāng)用戶訪問網(wǎng)頁時(shí)，他/她的名字可以存儲(chǔ)在cookie中。
下次用戶訪問該頁面時(shí)，cookie會(huì)“記住”他/她的名字。
Cookie以鍵值對(duì)形式保存，如：

username = John Doe

當(dāng)瀏覽器從服務(wù)器請(qǐng)求網(wǎng)頁時(shí)，屬于該頁面的cookie將添加到請(qǐng)求中。這樣，服務(wù)器獲取必要的數(shù)據(jù)以“記住”有關(guān)用戶的信息。
如果您的瀏覽器已關(guān)閉本地Cookie支持，則以下示例均無效。

JavaScript可以使用document.cookie屬性創(chuàng)建，讀取和刪除cookie。使用JavaScript，可以像這樣創(chuàng)建一個(gè)cookie：

document.cookie = "username=John Doe";

您還可以添加到期日期（以UTC時(shí)間為單位）。默認(rèn)情況下，在瀏覽器關(guān)閉時(shí)刪除cookie：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用path參數(shù)，您可以告訴瀏覽器cookie屬于哪個(gè)路徑。默認(rèn)情況下，cookie屬于當(dāng)前頁面。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

使用JavaScript，cookie可以像這樣讀取：

var x = document.cookie;

document.cookie將返回一個(gè)字符串中的所有cookie，如：cookie1 = value; cookie2 =值; cookie3 =值;

使用JavaScript，您可以像創(chuàng)建cookie一樣更改cookie：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

舊cookie被覆蓋。

刪除cookie非常簡(jiǎn)單。刪除cookie時(shí)，不必指定cookie值。只需將expires參數(shù)設(shè)置為傳遞日期：

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

您應(yīng)該定義cookie路徑以確保刪除正確的cookie。如果您未指定路徑，某些瀏覽器將不允許您刪除cookie。

document.cookie屬性看起來像普通的文本字符串。但事實(shí)并非如此。即使你將一個(gè)完整的cookie字符串寫入document.cookie，當(dāng)你再次讀出它時(shí)，你只能看到它的名稱 - 值對(duì)。如果您設(shè)置了新cookie，則不會(huì)覆蓋較舊的cookie。新的cookie被添加到document.cookie，所以如果你再次閱讀document.cookie，你會(huì)得到類似的東西：cookie1 = value; cookie2 = value;
如果要查找一個(gè)指定cookie的值，則必須編寫一個(gè)JavaScript函數(shù)來搜索cookie字符串中的cookie值。

在下面的示例中，我們將創(chuàng)建一個(gè)存儲(chǔ)訪客姓名的cookie。訪問者第一次到達(dá)網(wǎng)頁時(shí)，將要求他/她填寫他/她的姓名。然后將名稱存儲(chǔ)在cookie中。下次訪問者到達(dá)同一頁面時(shí)，他/她將收到歡迎信息。在這個(gè)例子中，我們將創(chuàng)建3個(gè)JavaScript函數(shù)：

用于設(shè)置cookie值的函數(shù)

獲取cookie值的函數(shù)

用于檢查cookie值的函數(shù)

設(shè)置Cookie的功能

首先，我們創(chuàng)建一個(gè)函數(shù)將訪問者的名稱存儲(chǔ)在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=/";
}

示例說明：
上述函數(shù)的參數(shù)是cookie的名稱（cname），cookie的值（cvalue）以及cookie到期之前的天數(shù)（exdays）。該函數(shù)通過將cookiename，cookie值和expires字符串相加來設(shè)置cookie。
獲取Cookie的功能
然后，我們創(chuàng)建一個(gè)function返回指定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 "";
}

功能說明：
將cookiename作為參數(shù)（cname）。使用要搜索的文本（cname +“=”）創(chuàng)建變量（名稱）。解碼cookie字符串，處理帶有特殊字符的cookie，例如"$"將分號(hào)上的document.cookie拆分為名為ca的數(shù)組（ca = decodingCookie.split（";"））。循環(huán)通過ca數(shù)組（i = 0; i < ca.length; i ++），并讀出每個(gè)值c = ca [i]）。如果找到cookie（c.indexOf（name）== 0），則返回cookie的值（c.substring（name.length，c.length））。如果找不到cookie，則返回“”。
檢查Cookie的功能
最后，我們創(chuàng)建一個(gè)函數(shù)來檢查是否設(shè)置了cookie。如果設(shè)置了cookie，它將顯示問候語。如果未設(shè)置cookie，它將顯示一個(gè)提示框，詢問用戶的名稱，并通過調(diào)用setCookie函數(shù)將用戶名cookie存儲(chǔ)365天：

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

所有代碼都在一起實(shí)現(xiàn)

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()在頁面加載時(shí)運(yùn)行該函數(shù)。
更詳情的Cookie技術(shù)文章