如何在单个cookie key中存储多个值

在Web开发中，Cookie是一种常用的客户端存储机制，用于在用户的浏览器中存储小量的数据。通常情况下，一个Cookie Key对应一个值，但有时我们需要在单个Cookie Key中存储多个值。以下是如何实现这一需求的基础概念和相关方法：

基础概念

Cookie: 一种由服务器发送到用户浏览器并保存在用户本地终端上的数据，通常用于识别用户身份或跟踪用户会话。
Key-Value对: Cookie是以键值对的形式存储的，每个键对应一个值。

存储多个值的方法

为了在一个Cookie Key中存储多个值，可以使用以下几种方法：

1. 使用分隔符

将多个值用特定的分隔符连接起来，存储在一个Cookie中。

示例代码（JavaScript）:

// 设置Cookie
function setMultiValueCookie(name, values, days) {
    const delimiter = '|'; // 选择一个合适的分隔符
    const valueString = values.join(delimiter);
    const expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${valueString};expires=${expires.toUTCString()};path=/`;
}

// 获取Cookie
function getMultiValueCookie(name) {
    const nameEQ = `${name}=`;
    const 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) {
            const valueString = c.substring(nameEQ.length, c.length);
            return valueString.split('|'); // 使用相同的分隔符拆分
        }
    }
    return null;
}

// 使用示例
setMultiValueCookie('userPrefs', ['darkMode', 'notifications'], 7);
console.log(getMultiValueCookie('userPrefs')); // 输出: ['darkMode', 'notifications']

2. 使用JSON格式

将多个值封装成一个JSON对象，然后将该对象序列化为字符串存储在Cookie中。

示例代码（JavaScript）:

// 设置Cookie
function setJsonCookie(name, values, days) {
    const jsonString = JSON.stringify(values);
    const expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${jsonString};expires=${expires.toUTCString()};path=/`;
}

// 获取Cookie
function getJsonCookie(name) {
    const nameEQ = `${name}=`;
    const 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) {
            const jsonString = c.substring(nameEQ.length, c.length);
            return JSON.parse(jsonString); // 解析JSON字符串
        }
    }
    return null;
}

// 使用示例
setJsonCookie('userPrefs', { darkMode: true, notifications: false }, 7);
console.log(getJsonCookie('userPrefs')); // 输出: { darkMode: true, notifications: false }