JavaScript如何根据cookie名称获取到cookie值？

JavaScript 根据 Cookie 名称获取对应值，主要通过解析 document.cookie 字符串实现。由于该属性返回当前页面所有 Cookie（格式为 name1=value1; name2=value2;…），需手动拆分、遍历并匹配目标名称。

特别说明：

asp中根据名称获取cookie值的方法很简单：

myname=request.cookies("myname")
response.cookies("myname")=myname

JavaScript 中没有类似原生支持 Cookie 操作的方法。

下面假设获取名为 OAbusyusername 的Cookie值，以下是几种常用且可靠的方法，您可以根据项目需求和偏好进行选择。

方法一：基础分割字符串法（推荐）

这是最经典和易于理解的方法。其核心思路是将整个Cookie字符串按分号;分割成数组，然后遍历数组找到以目标名称开头的项，再提取其值。

function getCookie(name) {
    // 对cookie字符串进行解码，处理特殊字符（如编码过的空格）
    const decodedCookie = decodeURIComponent(document.cookie);
    // 按分号分割成单个cookie的数组
    const cookieArray = decodedCookie.split(';');
    
    for(let i = 0; i ＜ cookieArray.length; i++) {
        let cookie = cookieArray[i];
        // 清除当前cookie字符串两端的空格
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1);
        }
        // 检查是否以“目标名称=”开头
        if (cookie.indexOf(name + "=") === 0) {
            // 返回等号之后的部分，即cookie的值
            return cookie.substring(name.length + 1, cookie.length);
        }
    }
    // 如果未找到，返回空字符串
    return "";
}


// 使用示例：获取名为 OAbusyusername 的cookie值
const username = getCookie('OAbusyusername');
console.log(username);

函数解析：此方法首先解码整个Cookie字符串，然后通过循环和字符串查找定位特定Cookie。它的优点是逻辑清晰，兼容性好。

方法二：使用正则表达式匹配法

这种方法更为简洁高效，通过一行正则表达式直接匹配出所需的值，避免了显式的循环和字符串分割。

function getCookie(name) {
    // 构造正则表达式：(^| ) 匹配开头或空格，name是变量，=([^;]*)匹配等号和值，(;|$)确保匹配到分号或结尾
    const regex = new RegExp(`(^| )${name}=([^;]*)(;|$)`);
    const match = document.cookie.match(regex);
    // 如果匹配成功，返回解码后的第二个捕获组（即值）；否则返回null或空字符串
    return match ? decodeURIComponent(match[2]) : null;
}


// 使用示例
const username = getCookie('OAbusyusername');

方法优势：代码非常简洁，利用正则表达式的强大匹配能力直接提取，性能通常更好。

方法三：转换为对象后访问（一次性获取全部）

如果您在页面上需要频繁读取多个不同的Cookie，可以先将所有Cookie解析为一个JavaScript对象，之后就可以像访问普通对象属性一样获取值，非常方便。

function getAllCookies() {
    const cookies = {};
    // 分割cookie字符串，注意这里用'; '分割更稳妥，因为cookie通常以“; ”分隔
    document.cookie.split('; ').forEach(cookie =＞ {
        const [name, ...valueParts] = cookie.split('=');
        // 将cookie名称和值（需要解码）存入对象
        cookies[name] = decodeURIComponent(valueParts.join('=')); // 处理值中可能包含的等号
    });
    return cookies;
}


// 使用示例
const allCookies = getAllCookies();
const username = allCookies.OAbusyusername; // 或 allCookies['OAbusyusername']
console.log(username);

应用场景：这种方法适合在页面初始化时调用一次，然后将allCookies对象存储起来供后续多次使用，避免重复解析字符串。

实际使用与注意事项

直接调用：选定上述任一方法定义getCookie函数后，只需传入Cookie名称字符串 ‘OAbusyusername’ 即可获取其值。
值不存在的情况：如果名称为OAbusyusername的Cookie不存在，上述函数通常会返回空字符串("")或null。在使用前建议进行判断，例如 if (username) { ... }。
现代API：最新的Cookie Store API提供了异步的cookieStore.get(‘name’)方法，但需要HTTPS环境且兼容性尚待普及，可作为未来技术选型参考。
编码与解码：Cookie 值若包含特殊字符（如分号、空格），需使用 encodeURIComponent / decodeURIComponent 处理，避免解析错误。
路径与域限制：设置 Cookie 时可指定 path 或 domain，读取时仅能获取当前路径及父路径下的 Cookie。
安全性：Cookie数据存储在用户计算机上，避免在 Cookie 中存储敏感信息（如密码、身份证号等）；考虑使用 HttpOnly 标志防止 JavaScript 访问（此时无法通过 document.cookie 读取）。

💎 总结

获取指定名称的 Cookie 值本质是字符串解析问题。推荐使用遍历拆分法（兼容性好）或正则匹配法（代码简洁），因其良好的兼容性和可读性，是大多数场景下的稳妥选择。您可以直接将对应的代码片段复制到您的项目中，并调用getCookie(‘OAbusyusername’)来获取所需的值。在实际项目中，建议封装为工具函数以提高复用性。如需频繁操作 Cookie，也可考虑使用第三方库（如 js-cookie）简化流程。