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