JavaScript 中檢查 Cookie 是否存在

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 不同型別的 JavaScript cookies
  2. 使用 JavaScript 建立一個 cookie
  3. 使用 JavaScript 讀取或檢查 cookies 是否存在
JavaScript 中檢查 Cookie 是否存在

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

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

不同型別的 JavaScript cookies

Cookie 分為三種型別:

  1. 會話 cookie 儲存在你的瀏覽器中。一旦瀏覽器關閉,它們就會被刪除。
  2. 第一方 cookie 由網站建立,僅供你的網站瀏覽。
  3. 第三方 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 中。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn