Cookie 与 localStorage_浏览器存储机制全解析

1. 引言

在现代 Web 开发中，浏览器存储机制是不可或缺的一部分。无论是保存用户偏好、会话信息还是缓存数据，选择合适的存储方式对于提升用户体验和应用性能至关重要。本文将深入探讨两种常见的浏览器存储机制：Cookie 和 localStorage。我们将详细介绍它们的基本概念、应用场景、区别以及最佳实践，帮助您更好地理解和使用这些技术。

2. Cookie 基础

2.1 什么是 Cookie？

Cookie 是一种在用户浏览器上存储少量数据的技术，通常用于保存会话信息、用户偏好等。每个 Cookie 都有一个名称和一个值，并且可以附加一些属性来控制其行为。Cookie 的数据会在每次 HTTP 请求时自动发送到服务器，因此它非常适合用于需要与服务器交互的场景。

2.2 Cookie 的属性和设置方法

设置和读取 Cookie

Cookie 可以通过 document.cookie 属性进行设置和读取。下面是一些常见的操作示例：

• 设置 Cookie：

  // 设置一个简单的 Cookie
  document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";// 设置带有多个属性的 Cookie
  document.cookie = "sessionToken=abc123; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; domain=.example.com; secure; HttpOnly";
  

• 读取 Cookie：

  // 读取所有 Cookie
  console.log(document.cookie); // 输出: username=JohnDoe; sessionToken=abc123// 解析特定的 Cookie
  function getCookie(name) {const value = `; ${document.cookie}`;const parts = value.split(`; ${name}=`);if (parts.length === 2) return parts.pop().split(';').shift();
  }console.log(getCookie("username")); // 输出: JohnDoe
  

Cookie 属性详解

• expires: 指定 Cookie 的过期时间（UTC 时间格式）。如果未设置此属性，Cookie 将在浏览器关闭时失效。

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

• max-age: 设置 Cookie 的最大存活时间（以秒为单位），优先级高于 expires。

  document.cookie = "username=JohnDoe; max-age=3600; path=/";
  

• domain: 指定 Cookie 所属的域名。默认情况下，Cookie 只对当前域名有效。

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

• path: 指定 Cookie 所属的路径。默认情况下，Cookie 只对当前路径及其子路径有效。

  document.cookie = "username=JohnDoe; path=/admin/";
  

• secure: 指定 Cookie 是否仅通过 HTTPS 传输，增强安全性。

  document.cookie = "username=JohnDoe; secure; path=/";
  

• HttpOnly: 防止 JavaScript 访问 Cookie，减少 XSS 攻击的风险。

  document.cookie = "sessionToken=abc123; HttpOnly; path=/";
  

2.3 Cookie 的应用场景

• 会话管理：保存用户的登录状态或会话令牌。

  // 登录成功后设置会话 Cookie
  document.cookie = "sessionId=abc123; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; secure; HttpOnly";
  

• 用户偏好设置：保存用户的语言选择、主题模式等偏好。

  // 保存用户选择的语言
  document.cookie = "language=en-US; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
  

• 跟踪用户行为：记录用户访问的页面或点击的广告。

  // 记录用户访问的页面
  document.cookie = "visitedPages=home,about,contact; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
  

---

3. localStorage 基础