JavaScript 中使用 Cookies 主要涉及到 document.cookie
属性。以下是一些基础概念和相关操作:
Cookies 是一种存储在用户浏览器上的小型数据片段,用于保存用户相关的信息,如登录状态、偏好设置等。每个 Cookie 都包含一个名称/值对,并且可以有额外的属性,如过期时间、路径、域等。
你可以使用 document.cookie
来设置一个新的 Cookie。例如:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
username=John Doe
是键值对。expires=Thu, 18 Dec 2023 12:00:00 UTC
指定了 Cookie 的过期时间。path=/
定义了 Cookie 的有效路径。要读取所有的 Cookie,只需访问 document.cookie
:
console.log(document.cookie);
这将输出所有 Cookie 的字符串,每个 Cookie 之间用分号和空格分隔。
修改 Cookie 实际上就是重新设置它:
document.cookie = "username=Jane Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
删除 Cookie 可以通过将其过期时间设置为过去的时间来实现:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
以下是一个简单的示例,展示了如何设置、读取和删除一个名为 user_preference
的 Cookie:
// 设置 Cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 读取 Cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// 删除 Cookie
function eraseCookie(name) {
document.cookie = name + '=; Max-Age=-99999999;';
}
// 使用示例
setCookie('user_preference', 'dark_mode', 7); // 设置一个7天后过期的 Cookie
console.log(getCookie('user_preference')); // 输出: dark_mode
eraseCookie('user_preference'); // 删除该 Cookie
通过上述方法,你可以在 JavaScript 中有效地管理 Cookies。
领取专属 10元无门槛券
手把手带您无忧上云