JavaScript编程
使用 JavaScript 操作 Cookies
什么是 Cookies？
Cookies 是存储在用户计算机上的小型文本文件，用于在网页中保存用户信息。当一个网页从服务器加载到浏览器后，连接关闭，服务器无法记住用户信息。Cookies 的发明解决了这个问题，可以记住用户的相关数据。
例如：
- 当用户访问网页时，可以将其姓名存储在 Cookie 中。
- 下次用户访问该页面时，Cookie 会“记住”他的姓名。
Cookie 的存储格式：
以键值对的形式保存，如：username=John Doe
工作机制：
当浏览器向服务器请求网页时，会将页面所属的 Cookie 一并发送给服务器，服务器由此获得用户信息。
注意： 如果浏览器关闭了本地 Cookie 支持，以下示例将无法工作。
使用 JavaScript 创建 Cookie
JavaScript 可通过 document.cookie 属性创建、读取和删除 Cookie。
创建 Cookie：
document.cookie = "username=John Doe";
添加过期时间：
默认情况下，Cookie 在浏览器关闭时删除，可以通过 UTC 时间设置过期日期：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
设置路径：
通过 path 参数可以指定 Cookie 的所属路径，默认情况下 Cookie 属于当前页面：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
使用 JavaScript 读取 Cookie
通过 JavaScript 可以读取所有 Cookies，如下所示：
let x = document.cookie;
document.cookie 会返回一个包含所有 Cookie 的字符串，格式如下：cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie
修改 Cookie 的方法与创建 Cookie 相同：
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
注意： 如果已存在相同名称的 Cookie，新值会覆盖旧值。
使用 JavaScript 删除 Cookie
删除一个 Cookie 非常简单，无需指定其值，只需将 expires 参数设置为过去的某个日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
注意：
为了确保删除正确的 Cookie，应明确指定其路径（path）。某些浏览器在未指定路径时可能无法删除 Cookie。
Cookie 字符串
document.cookie 看似一个普通的文本字符串，但实际上并不是。当读取 document.cookie 时，返回的是形如 cookie1=value;
cookie2=value 的键值对字符串。
如果设置一个新的 Cookie，旧的 Cookie 不会被覆盖，而是添加到 document.cookie 中。
例如：
document.cookie = "cookie1=value1";
document.cookie = "cookie2=value2";
console.log(document.cookie);
// 输出: cookie1=value1; cookie2=value2
如果需要查找某个特定 Cookie 的值，需要编写一个 JavaScript 函数来解析字符串。
JavaScript 操作 Cookie 示例
以下示例创建一个存储访客姓名的 Cookie，并在下次访问时显示欢迎消息。
创建三个 JavaScript 函数：
- 设置 Cookie 的函数
- 获取 Cookie 的函数
- 检查 Cookie 的函数
设置 Cookie 的函数
该函数将访客姓名存储在 Cookie 中，并设置过期时间：
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); // 计算过期时间
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
解释：
cname：Cookie 名称cvalue：Cookie 值exdays：Cookie 的有效天数
获取 Cookie 的函数
该函数返回指定名称的 Cookie 值：
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie); // 解码字符串
let ca = decodedCookie.split(';'); // 按分号分割字符串
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1); // 去掉开头的空格
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length); // 返回 Cookie 值
}
}
return "";
}
检查 Cookie 的函数
检查是否已设置指定 Cookie：
function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
解释：
- 如果
username已存在，显示欢迎信息。 - 如果
username不存在，提示用户输入姓名，并将其存储为 Cookie（有效期 365 天）。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Cookie 示例</title>
<script>
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<h1>JavaScript Cookie 示例</h1>
</body>
</html>
运行结果：
- 第一次访问页面时，提示用户输入姓名，并将其存储为 Cookie。
- 之后访问页面时，会显示欢迎消息（从 Cookie 中读取）。