js如何读取cookie的值

在前端开发中，我们经常需要通过JavaScript操作cookie，其中最常见的需求之一就是读取指定名称的cookie值。cookie本身是浏览器存储在客户端的一小段文本数据，所有cookie会以字符串的形式保存在document.cookie属性中，因此读取cookie的核心就是对这个字符串进行解析处理。

基础读取方式

最直接的方式是访问document.cookie属性，这个属性返回当前页面可访问的所有cookie组成的字符串，每个cookie之间用分号和空格分隔，单个cookie的格式为键=值。比如当前页面存在两个cookie时，document.cookie的返回值可能是username=zhangsan; age=20。

如果我们想获取指定名称的cookie值，就需要对这个字符串进行分割处理，大致步骤如下：

• 首先用; 作为分隔符，把整个cookie字符串拆分成单个cookie的数组
• 遍历这个数组，对每个cookie再用=分割，得到键和值两部分
• 对比键名是否和目标名称一致，一致的话就返回对应的值

通用读取函数实现

我们可以把上面的逻辑封装成一个通用的函数，方便后续重复使用，具体实现代码如下：

/**
 * 读取指定名称的cookie值
 * @param {string} name 要读取的cookie名称
 * @returns {string|null} 找到则返回对应的值，没找到返回null
 */
function getCookie(name) {
    // 获取所有cookie字符串
    const cookieStr = document.cookie;
    // 如果没有cookie直接返回null
    if (!cookieStr) {
        return null;
    }
    // 分割得到单个cookie数组
    const cookieArr = cookieStr.split('; ');
    // 遍历数组查找目标cookie
    for (let i = 0; i < cookieArr.length; i++) {
        const item = cookieArr[i];
        // 分割键和值
        const equalIndex = item.indexOf('=');
        const cookieName = item.substring(0, equalIndex);
        const cookieValue = item.substring(equalIndex + 1);
        // 名称匹配则返回对应值
        if (cookieName === name) {
            return cookieValue;
        }
    }
    // 没找到返回null
    return null;
}

使用这个函数的时候，只需要传入要查询的cookie名称即可，比如要读取名为token的cookie，直接调用getCookie('token')就能得到对应的值，如果不存在该cookie则返回null。

读取注意事项

在实际使用过程中，有几个点需要特别注意：

• 如果cookie的值中包含特殊字符，比如分号、等号、空格等，存储时通常会进行编码，读取后需要用decodeURIComponent方法解码才能得到原始内容
• 如果cookie设置了HttpOnly属性，那么JavaScript是无法读取到这个cookie的，这是浏览器的安全限制，防止XSS攻击获取敏感信息
• 不同路径下设置的cookie，只有在对应路径及其子路径下才能被读取到，如果读取不到可以先检查cookie的路径设置
• 如果cookie设置了domain属性，只有对应域名的页面才能访问该cookie，跨域情况下无法读取

带解码的增强版函数

考虑到cookie值可能被编码的情况，我们可以对上面的函数做增强，自动对值进行解码，代码如下：

/**
 * 读取指定名称的cookie值，自动解码
 * @param {string} name 要读取的cookie名称
 * @returns {string|null} 找到则返回解码后的值，没找到返回null
 */
function getCookieWithDecode(name) {
    const cookieStr = document.cookie;
    if (!cookieStr) {
        return null;
    }
    const cookieArr = cookieStr.split('; ');
    for (let i = 0; i < cookieArr.length; i++) {
        const item = cookieArr[i];
        const equalIndex = item.indexOf('=');
        const cookieName = item.substring(0, equalIndex);
        // 获取值并解码
        const cookieValue = decodeURIComponent(item.substring(equalIndex + 1));
        if (cookieName === name) {
            return cookieValue;
        }
    }
    return null;
}

这个增强版函数会在返回cookie值之前自动调用decodeURIComponent进行解码，避免因为编码问题导致拿到的值不符合预期。

JavaScriptcookie读取cookiedocument_cookie修改时间：2026-07-01 01:06:29