JavaScript BOM Cookie 的用法

JavaScript Cookie

Cookie是計算機上存儲在小文本文件中的數據。當Web服務器將網頁發送到瀏覽器時，鏈接將關閉，服務器將忘記用戶的全部內容。發明Cookie是爲了解決「如何記住用戶信息」的問題： 當用戶訪問網頁時，他/她的名字能夠存儲在cookie中。 下次用戶訪問該頁面時，cookie會「記住」他/她的名字。 Cookie以鍵值對形式保存，如：

username = John Doe
複製代碼

當瀏覽器從服務器請求網頁時，屬於該頁面的cookie將添加到請求中。這樣，服務器獲取必要的數據以「記住」有關用戶的信息。 若是您的瀏覽器已關閉本地Cookie支持，則如下示例均無效。

使用JavaScript建立Cookie

JavaScript可使用document.cookie屬性建立，讀取和刪除cookie。使用JavaScript，能夠像這樣建立一個cookie：

document.cookie = "username=John Doe";
複製代碼

您還能夠添加到期日期（以UTC時間爲單位）。默認狀況下，在瀏覽器關閉時刪除cookie：

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

使用path參數，您能夠告訴瀏覽器cookie屬於哪一個路徑。默認狀況下，cookie屬於當前頁面。

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

使用JavaScript閱讀Cookie

使用JavaScript，cookie能夠像這樣讀取：

var x = document.cookie;
複製代碼

document.cookie將返回一個字符串中的全部cookie，如：cookie1 = value; cookie2 =值; cookie3 =值;

使用JavaScript更改Cookie

使用JavaScript，您能夠像建立cookie同樣更改cookie：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 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屬性看起來像普通的文本字符串。但事實並不是如此。即便你將一個完整的cookie字符串寫入document.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值的函數
4. 設置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）。該函數經過將cookiename，cookie值和expires字符串相加來設置cookie。 獲取Cookie的功能 而後，咱們建立一個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做爲參數（cname）。使用要搜索的文本（cname +「=」）建立變量（名稱）。解碼cookie字符串，處理帶有特殊字符的cookie，例如'$'將分號上的document.cookie拆分爲名爲ca的數組（ca = decodingCookie.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，它將顯示一個提示框，詢問用戶的名稱，並經過調用setCookie函數將用戶名cookie存儲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);
    }
  }
}
複製代碼

全部代碼都在一塊兒實現

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