js怎么使用cookies

JavaScript 使用 Cookies 的方法

JavaScript 使用 cookies 主要通过以下几种方式：创建和设置 cookies、读取 cookies、删除 cookies。其中，创建和设置 cookies 是最重要的一步。

一、创建和设置 Cookies

创建和设置 cookies 是最基本的操作，通常通过 document.cookie 属性来实现。在 JavaScript 中，创建一个 cookie 的格式如下：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

详细描述：

1. 设置 Cookie 的值：document.cookie = "username=John Doe" 这部分代码用于设置 Cookie 的名称和值，其中，username 是 Cookie 的名称，John Doe 是其值。

2. 设置过期时间：expires=Thu, 18 Dec 2023 12:00:00 UTC 设置了 Cookie 的有效期，格式必须是UTC时间格式。如果没有设置过期时间，Cookie 会在浏览器关闭时自动删除。

3. 设置路径：path=/ 设置了 Cookie 的作用路径。在这个例子中，path=/ 表示整个网站都可以访问这个 Cookie。如果没有设置路径，Cookie 只对设置它的页面有效。

二、读取 Cookies

读取 cookies 可以通过 document.cookie 属性来实现。document.cookie 会返回当前页面的所有 cookies，形式是一个字符串，其中每个 Cookie 之间用 ; 分隔。

let cookies = document.cookie;

console.log(cookies);

为了方便处理 cookies，我们通常需要将它们解析成一个对象形式：

function getCookie(name) {

    let cookieArr = document.cookie.split(";");
    for (let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");
        if (name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

三、删除 Cookies

删除 cookie 的方法是将其过期时间设置为一个过去的时间。这可以通过再次设置相同的 Cookie 并将 expires 属性设置为一个过去的日期来实现：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

四、实际应用示例

1、创建和设置 Cookies

在实际应用中，我们可能需要在用户登录时设置一个 Cookie 来保存用户的会话信息：

function setSessionCookie(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=/";
}

2、读取 Cookies

读取用户的会话信息，以便在用户重新访问时能够自动登录：

function getSessionCookie(name) {

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

3、删除 Cookies

当用户登出时，我们需要删除对应的会话 Cookie：

function eraseCookie(name) {

    document.cookie = name + '=; Max-Age=-99999999;';
}

五、注意事项

1、Cookie 安全性

在设置 cookies 时，特别需要注意的是安全性问题，尤其是在存储敏感信息时。为了保证 cookies 的安全性，可以使用以下两个属性：

• HttpOnly：设置 HttpOnly 属性可以防止客户端脚本（如 JavaScript）访问 cookies，从而防止 XSS 攻击。
• Secure：设置 Secure 属性可以确保 cookies 只在 HTTPS 连接中传输。

例如：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; Secure; HttpOnly";

2、Cookie 大小限制

浏览器对每个域名下的 cookies 数量和大小都有一定的限制。通常，一个域名下的 cookies 数量最多为 20 个，每个 cookie 的大小不能超过 4KB。

3、跨域问题

由于安全原因，cookies 是不能跨域传输的。也就是说，只有设置 cookies 的域名和路径才能访问这些 cookies。

六、总结

通过本文的讲解，我们了解了 JavaScript 中如何使用 cookies，包括创建和设置 cookies、读取 cookies、删除 cookies。这些操作在实际开发中是非常常见的，特别是用户登录会话管理、用户偏好设置等场景。

为了提升项目管理效率，推荐使用以下两个系统：研发项目管理系统PingCode 和 通用项目协作软件Worktile。这两个系统可以帮助开发团队更好地管理项目，提高工作效率。

希望本文能对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。

相关问答FAQs：

1. 什么是JavaScript的cookies？

JavaScript的cookies是一种用于在用户计算机上存储小型数据的技术。它们通常用于跟踪和存储用户的偏好设置、登录状态以及其他与用户相关的信息。

2. 如何使用JavaScript创建和设置cookies？

要创建和设置一个cookie，你可以使用JavaScript的document.cookie属性。例如，要设置一个名为"username"的cookie，你可以使用以下代码：

document.cookie = "username=John Doe";

这将在用户的计算机上创建一个名为"username"的cookie，并将其值设置为"John Doe"。

3. 如何使用JavaScript读取和获取cookies的值？

要读取和获取一个cookie的值，你可以使用JavaScript的document.cookie属性。例如，要获取名为"username"的cookie的值，你可以使用以下代码：

var username = document.cookie.replace(/(?:(?:^|.*;s*)usernames*=s*([^;]*).*$)|^.*$/, "$1");

这将从document.cookie中提取名为"username"的cookie的值，并将其存储在变量username中。

4. 如何使用JavaScript删除cookies？

要删除一个cookie，你可以将其过期日期设置为一个过去的日期。例如，要删除名为"username"的cookie，你可以使用以下代码：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

这将将名为"username"的cookie的过期日期设置为过去的日期，从而使其被删除。请注意，你需要指定与原始cookie相同的路径和域，以确保删除正确的cookie。