如何在Cookie中存储多个值？

Cookie 是一种在客户端存储数据的机制，通常用于在用户访问网站时保存一些信息，虽然 Cookie 主要用于存储单个值，但通过一些技巧，我们可以实现在一个 Cookie 中存储多个值。

使用键值对存储多个值

最常见的方法是将多个值以键值对的形式存储在一个 Cookie 中。

user=JohnDoe; theme=dark; logged_in=true

在这个例子中，我们存储了用户名称、主题和登录状态。

示例代码

设置 Cookie:

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
// 设置多个值
setCookie("user", "JohnDoe");
setCookie("theme", "dark");
setCookie("logged_in", "true");

读取 Cookie:

function getCookie(name) {
    let nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
// 获取多个值
let user = getCookie("user");
let theme = getCookie("theme");
let loggedIn = getCookie("logged_in");

使用 JSON 格式存储多个值

另一种方法是将多个值存储为一个 JSON 字符串，这种方法更加灵活，可以存储复杂的数据结构。

示例代码

设置 Cookie:

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
// 设置多个值
let data = {
    user: "JohnDoe",
    theme: "dark",
    logged_in: true
};
setCookie("userData", JSON.stringify(data), 7);

读取 Cookie:

function getCookie(name) {
    let nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
// 获取多个值
let cookieValue = getCookie("userData");
if (cookieValue) {
    let data = JSON.parse(cookieValue);
    console.log(data.user);      // JohnDoe
    console.log(data.theme);     // dark
    console.log(data.logged_in); // true
}

相关问答 FAQs

Q1: Cookie 的存储容量有多大？

A1: 根据浏览器的不同，Cookie 的大小限制也不同，每个域名下的 Cookie 总大小不超过 4096 字节（约 4KB），在使用 Cookie 存储多个值时，需要注意不要超过这个限制。

Q2: Cookie 的安全性如何保障？

A2: Cookie 可以通过设置Secure 和HttpOnly 属性来提高安全性。Secure 属性确保 Cookie 只能通过 HTTPS 传输，防止中间人攻击。HttpOnly 属性则防止 JavaScript 访问 Cookie，从而降低 XSS 攻击的风险。

小编有话说

通过本文的介绍，相信大家已经了解了如何在 Cookie 中存储多个值的方法，无论是使用简单的键值对还是灵活的 JSON 格式，都能满足不同的需求，不过，需要注意的是，Cookie 的大小有限，使用时要合理规划存储内容，为了提高安全性，建议在设置 Cookie 时添加Secure 和HttpOnly 属性，希望本文对你有所帮助！