当前位置：首页 > 行业动态 > 正文

html5存储cookie

admin
行业动态
2025-05-03
2142

HTML5存储（如localStorage）与Cookie不同，前者容量大、不随请求发送，后者小且自动携带，分别用于本地缓存和会

HTML5 存储中的 Cookie 详解

Cookie 基础概念

Cookie 是浏览器提供的小型数据存储机制，用于在客户端（浏览器）与服务器之间传递少量数据，每个 Cookie 是一个键值对，通常由服务器通过响应头 Set-Cookie 设置，或由客户端通过 JavaScript 动态创建。

核心特性：

持久性：可设置过期时间（Expires 或 Max-Age）,默认随会话关闭失效。
自动携带：浏览器会自动将符合条件的 Cookie 随请求发送到服务器。
容量限制：单个 Cookie 大小通常限制为 4KB，每个域名最多存储 20-50 个 Cookie（浏览器依赖）。

Cookie 的典型用途

场景	说明
会话管理	保存登录状态（如 `user_id=123`）
用户偏好	记录语言、主题等设置（如 `theme=dark`）
购物车功能	临时存储商品 ID（如 `cart_items=987,101`）
统计追踪	配合第三方服务（如 Google Analytics）标记用户行为

Cookie 的 API 操作

1 设置 Cookie

通过 JavaScript 的 document.cookie 属性设置，格式为：key=value; [属性]。

html5存储cookie 第1张

// 设置名为 "username" 的 Cookie，值为 "John"，有效期 1 天
document.cookie = "username=John; expires=Tue, 10 Oct 2023 12:00:00 UTC; path=/; secure; HttpOnly";

属性	作用	示例
`expires`	过期时间（日期字符串）	`expires=Wed, 10 Oct 2023 12:00:00 GMT`
`max-age`	过期时间（秒）	`max-age=86400`（1 天）
`path`	生效路径	`path=/`（根路径）
`domain`	生效域名	`domain=.example.com`
`secure`	仅 HTTPS 传输	`secure`
`HttpOnly`	禁止 JavaScript 访问	`HttpOnly`
`SameSite`	跨站请求策略	`SameSite=Strict` 或 `Lax`

2 读取 Cookie

// 获取所有 Cookie，返回字符串 "key1=value1; key2=value2; ..."
const allCookies = document.cookie;
// 解析特定 Cookie
function getCookie(name) {
  const matches = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;])`));
  return matches ? matches[1] : null;
}
console.log(getCookie('username')); // 输出 "John"

3 删除 Cookie

将 expires 设置为过去时间或 max-age=0。

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

注意事项

大小与数量限制：
- 单个 Cookie 最大约 4KB，总数量受限（20-50 个）。
- 避免存储敏感数据（如密码），因容易被拦截或 XSS 攻击窃取。
安全策略：
- Secure：仅 HTTPS 站点可读取 Cookie。
- HttpOnly：禁止 JavaScript 访问，降低 XSS 风险。
- SameSite：限制跨站请求携带 Cookie（防范 CSRF）。
路径与域名：
- path 决定 Cookie 在当前域名下的哪些路径生效（如 /admin）。
- domain 允许子域名共享 Cookie（如 .example.com）。

Cookie 与其他存储方式对比

特性	Cookie	`localStorage`	`sessionStorage`
生命周期	可设置过期时间	永久（手动清除）	会话结束失效
大小限制	约 4KB/个，总量有限	约 5MB/域名	约 5MB/域名
浏览器支持	全平台	全平台	全平台
数据共享	随请求自动发送到服务器	仅客户端访问	仅客户端访问
用途	会话、配置、跟踪	持久化数据（如用户设置）	临时数据（如表单中转）