JS | 怎么通过JS脚本读取cookie？

原创于 2025-10-09 08:58:10 发布 · 991 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cookie #fromEntries #JQcookie #js-cookie

JavaScript 专栏收录该内容

112 篇文章

订阅专栏

在JavaScript中，你可以使用`document.cookie`属性来读取、设置和删除cookie。下面是一些基本的方法来读取cookie：

一. 读取单个cookie

要读取一个名为cookieName的cookie，你可以这样做：

function getCookie(cookieName) {
    let name = cookieName + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// 使用示例
let user = getCookie('username');
console.log(user);

函数功能解析

该函数用于从浏览器cookie中获取指定名称的值，属于前端开发中常见的cookie操作工具函数。

核心逻辑拆解

1、参数处理

接收cookieName参数，拼接成name=value格式的查询字符串

2、cookie解码

decodeURIComponent对document.cookie进行URL解码，处理特殊字符

3、数据分割

用分号;分割解码后的字符串为数组ca，每个元素代表一个cookie键值对

4、遍历匹配

循环检查每个元素是否以目标字符串开头
去除前导空格后执行精确匹配

5、返回值

匹配成功则返回等号后的值
未找到时返回空字符串

使用注意事项

需要调用前确保document.cookie已存在
不支持路径(path)或域名(domain)限定
如需设置cookie，需配合document.cookie使用

改进建议

增加对SameSite属性的支持
添加过期时间参数处理
考虑使用split('=')替代字符串查找提升性能

番外：以下是几种更简洁的cookie解析方法，结合不同技术方案实现：

原生JavaScript改进方案

1‌、正则表达式优化

使用正则匹配可减少循环和字符串操作：

function getCookie(name) {
    return document.cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`)?.pop() || "";
}

通过正则直接提取目标cookie值，避免手动分割字符串。

2、‌Object.fromEntries转换

将cookie转为对象后直接访问：

const cookies = Object.fromEntries(
    document.cookie.split(';').map(c => c.trim().split('='))
);
console.log(cookies.username); // 直接通过属性访问

此方法一次性解析所有cookie为键值对象。

第三方库方案

1‌、js-cookie库

轻量级库提供链式调用：

// 设置
Cookies.set('user', 'John', { expires: 7, path: '/' });
// 获取
console.log(Cookies.get('user')); // "John"

支持过期时间、路径等属性配置，代码量减少50%以上。

2、‌jQuery插件JQcookie

与jQuery深度集成：

$.cookie('theme', 'dark'); // 设置
$.cookie('theme'); // 获取
$.removeCookie('theme'); // 删除

支持JSON对象存储和跨域处理

现代浏览器API

1‌、Cookie Store API

异步操作更安全：

const cookie = await cookieStore.get('session');
console.log(cookie?.value);

需HTTPS环境，但避免了同步阻塞问题。

综合建议

简单场景优先使用正则表达式方案（方法1）
复杂项目推荐js-cookie库（方法3）
未来兼容性考虑可逐步迁移至Cookie Store API（方法5）

二. 读取所有cookie（可选）

如果你想要读取所有cookie，可以直接使用document.cookie属性，然后对其进行解码和分割处理：

function getAllCookies() {
    let cookies = document.cookie;
    let cookiesArray = cookies.split(';');
    let cookiesObject = {};
    cookiesArray.forEach(function(cookie) {
        let [name, value] = cookie.trim().split('=');
        cookiesObject[name] = decodeURIComponent(value);
    });
    return cookiesObject;
}

// 使用示例
let allCookies = getAllCookies();
console.log(allCookies);

函数功能解析

这是一个JavaScript函数，用于获取当前页面的所有cookie并将其转换为对象格式。以下是代码的功能说明：

1、功能概述：

读取document.cookie获取当前页面的所有cookie字符串
将cookie字符串分割成数组
将每个cookie转换为键值对形式并存入对象

2、实现特点：

使用split(';')处理cookie分隔符
使用trim()清除前后空格
使用decodeURIComponent()解码cookie值
返回包含所有cookie的键值对对象

3、使用场景：

需要批量获取页面cookie时
需要将cookie转换为更易操作的JavaScript对象时
调试或检查当前页面cookie内容

4、注意事项：

该函数只能在浏览器环境运行
某些安全标记的cookie(如HttpOnly)无法通过JavaScript获取
返回的对象只包含可访问的cook

注意事项：

❶ ‌安全性‌：直接在客户端读取cookie可能会暴露敏感信息，特别是如果这些cookie包含敏感数据（如认证令牌）。确保只在需要的时候读取，并考虑服务器端验证。

‌❷ 编码‌：document.cookie返回的cookie值是经过URL编码的，因此在解析和存储时需要使用decodeURIComponent()进行解码。

❸ ‌过期时间‌：虽然直接读取document.cookie不涉及过期时间的处理，但在设置cookie时，你应该考虑到过期时间（例如，使用expires或max-age属性）以确保cookie在适当的时间后被删除。例如，在设置cookie时可以这样做：

document.cookie = "username=John Doe; max-age=3600; path=/"; // cookie将在1小时内有效

通过以上方法，你可以在JavaScript中灵活地读取和处理cookie。

以下是更简洁的 getAllCookies 实现方案：

const getAllCookies = () => 
  Object.fromEntries(
    document.cookie.split(';')
      .map(c => c.trim().split('='))
      .map(([k, v]) => [k, decodeURIComponent(v)])
  );

这个实现特点：