原生js怎么获取cookie

原生JavaScript获取cookie的方法包括：使用document.cookie属性、解析cookie字符串、使用正则表达式、封装成函数。 其中，使用document.cookie属性获取所有cookie是最为基础的方法。下面我们详细展开这一方法。

使用document.cookie属性可以获取当前网页的所有cookie。这个属性返回一个包含所有cookie的字符串，格式为key1=value1; key2=value2; ...。需要注意的是，document.cookie只能获取当前域名下的cookie，且不能获取HttpOnly属性的cookie。这种方法虽然简单直接，但需要进一步处理字符串才能获取特定的cookie值。通过解析这个字符串，我们可以提取出想要的cookie。

一、使用`document.cookie`获取所有cookie

document.cookie是一个包含当前网页所有cookie的字符串。这个字符串以分号和空格分隔，形如"key1=value1; key2=value2; ..."。

例如，假设我们有以下cookie：

document.cookie = "username=JohnDoe";
document.cookie = "sessionToken=abc123";

那么document.cookie的值将会是"username=JohnDoe; sessionToken=abc123"。

二、解析cookie字符串

要从document.cookie中提取特定的cookie，需要解析这个字符串。我们可以通过字符串方法或正则表达式来实现。

1. 通过字符串方法解析

我们可以利用split方法将cookie字符串分割成键值对数组，然后再进一步分割每个键值对。

function getCookie(name) {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        if (cookie.startsWith(name + '=')) {
            return cookie.substring(name.length + 1);
        }
    }
    return null;
}

这个函数首先将cookie字符串按分号分割成数组，然后遍历每个键值对，找到以指定名称开头的cookie并返回其值。

2. 使用正则表达式解析

正则表达式是一种更为简洁的方法，可以直接从cookie字符串中提取特定的cookie值。

function getCookie(name) {
    let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    if (match) {
        return match[2];
    }
    return null;
}

这个函数使用正则表达式匹配以指定名称开头的cookie，捕获其值并返回。

三、封装成函数

为了方便使用，我们可以将获取cookie的功能封装成一个通用的函数。以下是一个完整的封装示例：

function getCookie(name) {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        if (cookie.startsWith(name + '=')) {
            return decodeURIComponent(cookie.substring(name.length + 1));
        }
    }
    return null;
}

这个函数不仅可以获取指定名称的cookie，还对cookie值进行解码，确保特殊字符被正确处理。

四、设置和删除cookie

除了获取cookie，我们还需要了解如何设置和删除cookie。以下是相关方法的介绍。

1. 设置cookie

使用document.cookie可以设置新的cookie。设置cookie时，可以指定其名称、值、过期时间、路径、域名和安全属性。

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

这个函数接受cookie的名称、值和过期天数作为参数，生成相应的cookie字符串并设置它。

2. 删除cookie

删除cookie的方法是将其过期时间设置为过去的时间点。

function deleteCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

这个函数将指定名称的cookie过期时间设置为一个负值，使其立即失效，从而实现删除效果。

五、跨域cookie管理

在实际应用中，可能需要处理跨域cookie。跨域cookie的设置和获取需要注意同源策略，确保cookie的安全性。

1. 设置跨域cookie

设置跨域cookie时，需要指定domain属性，使其适用于多个子域。

document.cookie = "username=JohnDoe; domain=.example.com; path=/";

这个cookie将适用于example.com的所有子域，如sub.example.com。

2. 安全属性

为确保cookie的安全性，可以使用Secure和HttpOnly属性。Secure属性确保cookie只能通过HTTPS传输，HttpOnly属性则禁止JavaScript访问cookie，防止XSS攻击。

document.cookie = "username=JohnDoe; Secure; HttpOnly";

这个cookie只能通过HTTPS传输，并且无法通过JavaScript访问。

六、常见问题与解决方案

在使用cookie时，可能会遇到一些常见问题，如cookie大小限制、跨站点请求等。以下是一些解决方案。

1. Cookie大小限制

浏览器对单个cookie的大小和总数有限制。单个cookie的大小通常不能超过4KB，总数不能超过300个。为避免超出限制，可以使用多个cookie或其他存储方式，如localStorage。

2. 跨站点请求

跨站点请求时，可能需要处理CORS（跨域资源共享）问题。确保服务器设置了适当的CORS头，允许跨域请求携带cookie。

Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Credentials: true

这些头允许example.com发起跨域请求，并携带凭证（如cookie）。

七、项目团队管理系统的应用

在项目团队管理系统中，cookie的管理尤为重要。例如，研发项目管理系统PingCode和通用项目协作软件Worktile都需要安全、有效地管理用户会话和身份验证信息。

1. PingCode

PingCode作为研发项目管理系统，需要处理大量用户数据和敏感信息。通过设置适当的cookie属性（如Secure和HttpOnly），可以确保用户数据的安全性。同时，跨域cookie的设置有助于实现多个子域间的数据共享和统一管理。

2. Worktile

Worktile作为通用项目协作软件，需要提供灵活的cookie管理方案，以满足不同用户和项目的需求。通过封装的cookie管理函数，可以简化cookie的设置、获取和删除操作，提高用户体验。

总结

通过本文，我们详细介绍了原生JavaScript获取cookie的方法，包括使用document.cookie属性、解析cookie字符串、使用正则表达式、封装成函数等。此外，还探讨了设置和删除cookie、跨域cookie管理、常见问题及解决方案，并举例说明了在项目团队管理系统中的应用。希望这些内容对您有所帮助。