JavaScript 中檢查 Cookie 是否存在

1. 不同型別的 JavaScript cookies
2. 使用 JavaScript 建立一個 cookie
3. 使用 JavaScript 讀取或檢查 cookies 是否存在

cookie 可能是一個簡短的文件，它在大約 4KB 的 PC 上儲存一些資料。使用 JavaScript，將建立、檢索和更改 cookie，並且可以限制 cookie 的值、名稱和長度。

本文討論了 cookies 的概念以及如何使用 JavaScript 檢查 cookie 是否存在。

不同型別的 JavaScript cookies

Cookie 分為三種型別：

1. 會話 cookie 儲存在你的瀏覽器中。一旦瀏覽器關閉，它們就會被刪除。
2. 第一方 cookie 由網站建立，僅供你的網站瀏覽。
3. 第三方 cookie 由你網站上的第三方廣告生成。

使用 JavaScript 建立一個 cookie

你可以使用 JavaScript 提供的 document.cookie 屬性建立一個 name=value 形式的 cookie，該屬性將允許你一次僅設定一個 cookie。使用此 document.cookie 屬性，可以設定、讀取和刪除 cookies。

語法：

document.cookie = 'UserName = HelloWorld';

假設你想在建立 cookies 時使用特殊字元。在這種情況下，你需要使用名為 encodeURIComponent() 的 Javascript 提供的內建函式，該函式對分號、空格等特殊字元進行編碼。

語法 - encodeURIComponent()：

document.cookie = 'UserName=' + encodeURIComponent('Hello  World!');

預設 cookie 生命週期僅限於當前瀏覽器會話的持續時間。一旦使用者退出瀏覽器，它就會被刪除。

使用 max-age 屬性，你可以以秒為單位指定 cookie 在從系統中刪除之前可以儲存多長時間。

語法 - max-age:

document.cookie = 'Username = HelloWorld; max-age =' + 15 * 24 * 60 * 60;

這個 cookie 的有效期為 15 天。

有關建立 cookie 的更多資訊，請參見 document.cookie 的文件。

使用 JavaScript 讀取或檢查 cookies 是否存在

document.cookie 屬性返回一個字串，其中包含一個分號和一個以空格分隔的所有 cookies 列表。此字串不包含任何 cookie 屬性，例如過期、路徑、域等。

要從此列表中獲取單個 cookie，請使用 split() 方法將其拆分為單獨的 name=value 對，然後搜尋所需的名稱，如下例所示：

function getCookie(user) {
  var cookieArr = document.cookie.split(';');
  for (var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split('=');
    if (user == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

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

輸出：

// If cookie is set
Welcome again, shraddha

在上面的程式碼中，我們建立了兩個函式：

1. getCookie() 函式讀取 cookie 的值。
2. checkCookie() 函式使用 getCookie() 檢查使用者名稱是否被設定。

如果已配置，將顯示歡迎訊息。如果不設定，可以提示使用者名稱並儲存在 cookies 中。