JavaScript中Cookie的简介和使用方法详解

// 设置一个简单的 Cookie
document.cookie = "username=JohnDoe";

// 设置带过期时间的 Cookie
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 天后过期
document.cookie = `username=JohnDoe; expires=${date.toUTCString()}; path=/`;

// 设置带域名和 Secure 属性的 Cookie
document.cookie = "username=JohnDoe; domain=example.com; Secure";

// 读取所有 Cookie
const cookies = document.cookie;
console.log(cookies); // 输出：username=JohnDoe; theme=dark

// 解析 Cookie
function getCookie(name) {
    const cookieArr = document.cookie.split(';');
    for (let cookie of cookieArr) {
        const [cookieName, cookieValue] = cookie.trim().split('=');
        if (cookieName === name) {
            return decodeURIComponent(cookieValue);
        }
    }
    return null;
}

console.log(getCookie("username")); // 输出：JohnDoe

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

function setCookie(cname,cvalue,exdays)
{
  // 创建一个新的日期对象
  var d = new Date();
  // 设置日期对象为当前时间加上指定的天数
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  // 将过期时间转换为GMT字符串格式
  var expires = "expires="+d.toGMTString();
  // 设置cookie字符串，包含名称、值和过期时间
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(name) {
    // 将文档中的所有cookie字符串按分号分割成数组
    const cookieArr = document.cookie.split(';');
    // 遍历cookie数组中的每个cookie字符串
    for (let cookie of cookieArr) {
        // 将每个cookie字符串按等号分割成名称和值，并去除前后空格
        const [cookieName, cookieValue] = cookie.trim().split('=');
        // 检查当前cookie的名称是否与目标名称匹配
        if (cookieName === name) {
            // 如果匹配，返回解码后的cookie值
            return decodeURIComponent(cookieValue);
        }
    }
    // 如果没有找到匹配的cookie，返回null
    return null;
}

function checkCookie()
{
  // 获取名为 "username" 的 cookie 值
  var username=getCookie("username");
  // 如果 cookie 中有用户名
  if (username!="")
  {
    // 弹出欢迎信息
    alert("Welcome again " + username);
  }
  else 
  {
    // 如果没有用户名，提示用户输入名称
    username = prompt("Please enter your name:","");
    // 如果用户输入了名称且不为空
    if (username!="" && username!=null)
    {
      // 设置 "username" cookie，有效期为 365 天
      setCookie("username",username,365);
    }
  }
}