首页 > 网络编程 > JavaScript > javascript技巧 > JS Cookie使用

JavaScript中Cookie的简介和使用方法详解

2025-05-23 09:00:08 作者：vvilkin的学习备忘

cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript,这篇文章主要给大家介绍了关于JavaScript中Cookie的简介和使用方法,需要的朋友可以参考下

在现代 Web 开发中，Cookie 是一种常用的客户端存储技术，用于在浏览器和服务器之间传递数据。通过 Cookie，开发者可以存储用户偏好、会话信息等数据，从而实现个性化体验和状态管理。本文将介绍 Cookie 的基本概念，并通过 JavaScript 演示如何操作 Cookie。

1. 什么是 Cookie？

1.1 Cookie 的定义

Cookie 是服务器发送到用户浏览器并保存在本地的一小段数据（通常不超过 4KB）。浏览器会在后续请求中自动将 Cookie 发送回服务器，从而实现状态管理。

1.2 Cookie 的作用

会话管理：保存用户的登录状态、购物车信息等。
个性化设置：存储用户的主题偏好、语言设置等。
跟踪用户行为：用于分析用户行为或广告投放。

1.3 Cookie 的特点

存储大小：每个 Cookie 最大 4KB。
数量限制：每个域名下的 Cookie 数量有限（通常为 20-50 个）。
生命周期：可以设置过期时间，分为会话 Cookie 和持久 Cookie。
安全性：可以通过 HttpOnly、Secure 等属性增强安全性。

2. Cookie 的属性

每个 Cookie 可以包含以下属性：

名称（Name）：Cookie 的唯一标识。
值（Value）：存储的实际数据。
过期时间（Expires）：Cookie 的过期时间，默认为会话结束时失效。
路径（Path）：指定 Cookie 的有效路径。
域名（Domain）：指定 Cookie 的有效域名。
安全性（Secure）：仅通过 HTTPS 协议传输。
HttpOnly：禁止 JavaScript 访问，防止 XSS 攻击。

3. JavaScript 操作 Cookie

3.1 设置 Cookie

通过 document.cookie 可以设置 Cookie。需要注意的是，document.cookie 是一个字符串，每次只能设置一个键值对。

// 设置一个简单的 Cookie
document.cookie = "username=JohnDoe";

// 设置带过期时间的 Cookie
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 天后过期
document.cookie = `username=JohnDoe; expires=${date.toUTCString()}; path=/`;

// 设置带域名和 Secure 属性的 Cookie
document.cookie = "username=JohnDoe; domain=example.com; Secure";

3.2 读取 Cookie

通过 document.cookie 可以读取当前域名下的所有 Cookie，返回一个由分号分隔的字符串。

// 读取所有 Cookie
const cookies = document.cookie;
console.log(cookies); // 输出：username=JohnDoe; theme=dark

// 解析 Cookie
function getCookie(name) {
    const cookieArr = document.cookie.split(';');
    for (let cookie of cookieArr) {
        const [cookieName, cookieValue] = cookie.trim().split('=');
        if (cookieName === name) {
            return decodeURIComponent(cookieValue);
        }
    }
    return null;
}

console.log(getCookie("username")); // 输出：JohnDoe

3.3 删除 Cookie

要删除一个 Cookie，只需将其过期时间设置为过去的时间。

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

4. Cookie 的封装使用

4.1 设置 cookie 值的函数

function setCookie(cname,cvalue,exdays)
{
  // 创建一个新的日期对象
  var d = new Date();
  // 设置日期对象为当前时间加上指定的天数
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  // 将过期时间转换为GMT字符串格式
  var expires = "expires="+d.toGMTString();
  // 设置cookie字符串，包含名称、值和过期时间
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

4.2 获取 cookie 值的函数

function getCookie(name) {
    // 将文档中的所有cookie字符串按分号分割成数组
    const cookieArr = document.cookie.split(';');
    // 遍历cookie数组中的每个cookie字符串
    for (let cookie of cookieArr) {
        // 将每个cookie字符串按等号分割成名称和值，并去除前后空格
        const [cookieName, cookieValue] = cookie.trim().split('=');
        // 检查当前cookie的名称是否与目标名称匹配
        if (cookieName === name) {
            // 如果匹配，返回解码后的cookie值
            return decodeURIComponent(cookieValue);
        }
    }
    // 如果没有找到匹配的cookie，返回null
    return null;
}

4.3 检测 cookie 值的函数

function checkCookie()
{
  // 获取名为 "username" 的 cookie 值
  var username=getCookie("username");
  // 如果 cookie 中有用户名
  if (username!="")
  {
    // 弹出欢迎信息
    alert("Welcome again " + username);
  }
  else 
  {
    // 如果没有用户名，提示用户输入名称
    username = prompt("Please enter your name:","");
    // 如果用户输入了名称且不为空
    if (username!="" && username!=null)
    {
      // 设置 "username" cookie，有效期为 365 天
      setCookie("username",username,365);
    }
  }
}

5. Cookie 的局限性

尽管 Cookie 非常有用，但它也有一些局限性：

存储容量小：每个 Cookie 最大 4KB，且每个域名下的 Cookie 数量有限。
性能问题：每次请求都会携带 Cookie，可能增加请求负载。
安全性问题：容易被 XSS 和 CSRF 攻击。

6. 可替代方案

对于更复杂的客户端存储需求，可以考虑以下替代方案：

LocalStorage：存储容量更大（通常为 5MB），数据不会随请求发送到服务器。
SessionStorage：类似于 LocalStorage，但数据仅在当前会话中有效。
IndexedDB：支持存储大量结构化数据，适合复杂应用。

到此这篇关于JavaScript中Cookie的简介和使用方法的文章就介绍到这了,更多相关JS Cookie使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！