JavaScript如何使用Cookie存值

在JavaScript中，可以使用document.cookie来设置、读取或删除Cookie。以下是一个如何使用document.cookie来存储一个值的简单示例：

设置Cookie：

// 假设我们有一个值要存储  
let valueToStore = 'Hello, World!';  
  
// 设置Cookie的名称、值和过期时间  
// 注意：这里为了简单起见，我们没有设置域名、路径和Secure/HttpOnly标志  
// 但在生产环境中，你应该考虑设置这些属性以提高安全性  
let cookieName = 'myCookie';  
let expires = new Date();  
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000)); // 设置过期时间为1天后  
  
document.cookie = `${cookieName}=${encodeURIComponent(valueToStore)};expires=${expires.toUTCString()};path=/`;

在这个例子中，我们使用encodeURIComponent来确保值中的任何特殊字符都被正确编码，以便它们可以安全地存储在Cookie中。我们还设置了过期时间和路径。

读取Cookie：

// 读取名为'myCookie'的Cookie的值  
function getCookie(name) {  
    let cookieArray = document.cookie.split('; '); // 注意：这里假设cookie之间用'; '分隔  
    for (let i = 0; i < cookieArray.length; i++) {  
        let cookiePair = cookieArray[i].split('=');  
        if (decodeURIComponent(cookiePair[0]) === name) {  
            return decodeURIComponent(cookiePair[1]);  
        }  
    }  
    return null;  
}  
  
let cookieValue = getCookie('myCookie');  
console.log(cookieValue); // 输出: Hello, World!

在getCookie函数中，我们首先使用split方法将document.cookie字符串分割成一个数组，其中每个元素都是一个单独的Cookie（假设它们用; 分隔）。然后，我们遍历这个数组，检查每个Cookie的名称是否匹配我们要查找的名称。如果找到匹配项，我们就返回解码后的值。

删除Cookie：

要删除一个Cookie，只需将其过期时间设置为一个过去的日期即可：

let expires = new Date();  
expires.setTime(expires.getTime() - (1 * 24 * 60 * 60 * 1000)); // 设置过期时间为1天前  
  
document.cookie = `myCookie=;expires=${expires.toUTCString()};path=/`;