JavaScript 中檢查 Cookie 是否存在
cookie
可能是一個簡短的文件,它在大約 4KB 的 PC 上儲存一些資料。使用 JavaScript,將建立、檢索和更改 cookie,並且可以限制 cookie 的值、名稱和長度。
本文討論了 cookies
的概念以及如何使用 JavaScript 檢查 cookie
是否存在。
不同型別的 JavaScript cookies
Cookie 分為三種型別:
- 會話 cookie 儲存在你的瀏覽器中。一旦瀏覽器關閉,它們就會被刪除。
- 第一方 cookie 由網站建立,僅供你的網站瀏覽。
- 第三方 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
在上面的程式碼中,我們建立了兩個函式:
getCookie()
函式讀取 cookie 的值。checkCookie()
函式使用getCookie()
檢查使用者名稱是否被設定。
如果已配置,將顯示歡迎訊息。如果不設定,可以提示使用者名稱並儲存在 cookies 中。
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