LOGO 首页 OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 技术文档 其他文档  
 
网站管理员

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


2026年4月21日 23:21 本文热度 96

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)简化流程。


该文章在 2026/4/23 16:18:18 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2026 ClickSun All Rights Reserved  粤ICP备13012886号-9  粤公网安备44030602007207号