JavaScript Cookie

Cookies使您可以將信息存儲在用戶的Web瀏覽器中。

什么是Cookie？

Cookie是一個小型文本文件，可讓您在用戶計算機上存儲少量數(shù)據(jù)（近4KB）。

Web服務器將網(wǎng)頁發(fā)送到瀏覽器后，連接將關閉，并且服務器會忘記有關用戶的所有信息。

發(fā)明了Cookies來解決“如何記住有關用戶的信息”的問題。

Cookies可用于跟蹤信息，例如用戶喜好，當用戶下次訪問網(wǎng)站時，網(wǎng)站可以檢索該信息以個性化頁面。

Cookies以“名稱=值”對的形式保存，例如：

username = Seagull

當瀏覽器從服務器請求網(wǎng)頁時，屬于該頁面的cookie被添加到請求中。這樣，服務器將獲得必要的數(shù)據(jù)以“記住”有關用戶的信息。

使用JavaScript創(chuàng)建Cookie

在JavaScript中，您可以使用document.cookie屬性創(chuàng)建，讀取和刪除Cookie 。

可以這樣創(chuàng)建一個cookie：

  document.cookie = "username=Seagull";

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

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";

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

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

使用JavaScript讀取Cookie

在JavaScript中，可以這樣讀取cookie：

  var x = document.cookie;

讀取cookie稍微復雜一點，因為該document.cookie屬性僅返回一個包含分號和所有cookie的空格分隔列表的字符串（例如，名稱=值對，例如cookie1 = value; cookie2 = value; cookie3 = value）。為了從此列表中獲取單個cookie，您需要使用split()方法將其分成單個name = value對，并搜索特定名稱。

此字符串不包含屬性，如expires，path，domain，等，可能已經(jīng)為Cookie集。

使用JavaScript更改Cookie

改變或修改一個cookie的唯一方法是創(chuàng)建一個具有相同的另一種餅干name和path為現(xiàn)有的。

  document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

注意：創(chuàng)建具有相同name但不同的cookie path不會更改現(xiàn)有的cookie，而是會添加一個額外的cookie。

使用JavaScript刪除Cookie

刪除Cookie非常容易。刪除Cookie：

• 只需再次使用相同的設置name，指定一個空值

• 或將expires參數(shù)設置為經(jīng)過的日期

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

請記住，如果您path為cookie 指定了或其他屬性，則在刪除它時還需要包括它們。

JavaScript Cookie示例

在下面的示例中，我們將創(chuàng)建一個存儲用戶名的cookie。

用戶首次訪問該網(wǎng)頁時，將要求他/她填寫其姓名。然后將該名稱存儲在cookie中。

下次用戶訪問同一頁面時，他/她將獲得存儲在cookie中的值。

對于示例，我們將創(chuàng)建2個JavaScript函數(shù)：

• 設置cookie值的功能

• 獲取Cookie值的函數(shù)

儲存cookie

首先，我們創(chuàng)建一個將訪問者的姓名存儲在cookie變量中的函數(shù)。

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + 1);
  var expires = "expires="+ now.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

功能說明：

上面函數(shù)的參數(shù)是cookie的名稱(cname)和cookie的值(cvalue)。

該函數(shù)通過將cookie名稱，cookie值和expires字符串（1個月）加在一起來設置cookie。

讀取cookie

然后，我們創(chuàng)建一個顯示指定cookie值的函數(shù)。

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');

  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
        document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);
     }
  }
}

函數(shù)說明：

此函數(shù)將cookie名稱作為參數(shù)(cname)。

獲取所有cookie（allcookies = document.cookie）。

將分號上的document.cookie拆分為名為cookieArr的數(shù)組（cookieArr = allcookies.split（';'））。

遍歷cookieArr數(shù)組（i = 0; i <cookieArr.length; i ++），并讀出每個值（cookiePair = cookieArr [i]）。

如果找到了cookie（cname == cookiePair [0]），則寫入cookie的鍵和值（cookiePair [0]，cookiePair [1]）。

合在一起

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + 1);
  var expires = "expires="+ now.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');
  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
           document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);
     }
  }
}

Cookies屬性

Cookies是具有5個屬性的純文本數(shù)據(jù)記錄：