HTML本地存储

Cookie 是浏览器存储的一小段文本数据，通常用于保存用户会话信息、偏好设置、跟踪用户行为等。它由服务器或客户端 JavaScript 设置，并在后续请求中自动携带到服务器，以维持状态或提供个性化体验。

存储数据量小（通常最大约 4KB）。
可由服务器或 JavaScript 进行读写。
会在同一域名下的请求中自动携带（除非设置 HttpOnly）。
可设置过期时间（默认情况下，Session Cookie 在浏览器关闭时删除）。
可限制作用域（domain 和 path 控制访问范围）。
安全性取决于设置（可以使用 Secure 和 HttpOnly 提高安全性）。

// 设置 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 01 Mar 2025 12:00:00 GMT; path=/";

// 读取 Cookie
console.log(document.cookie); // username=JohnDoe

// 删除 Cookie（设置过期时间为过去）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

1	Set-Cookie: sessionId=abc123; Expires=Fri, 01 Mar 2025 12:00:00 GMT; Path=/; Secure; HttpOnly

属性	作用
`name=value`	设置 Cookie 的键值对
`expires`	过期时间（如果不设置，Cookie 为 Session Cookie，会话结束后删除）
`max-age`	以秒为单位的有效时间（比 `expires` 更精确）
`path`	限制 Cookie 作用的路径（如 `/` 表示整个网站）
`domain`	允许访问 Cookie 的域（默认当前域）
`Secure`	仅在 HTTPS 连接时发送 Cookie
`HttpOnly`	仅允许服务器访问，JavaScript 不能访问（防止 XSS）
`SameSite`	限制跨站请求时是否发送 Cookie（防止 CSRF 攻击）

2.LocalStorage（本地存储）

使用localStorage对象可以在用户的浏览器中存储键值对数据。这些数据会保留在浏览器关闭后，也不会自动发送给服务器。

示例用法：


localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

3.SessionStorage（会话存储）

使用sessionStorage对象存储的数据仅在当前会话期间有效。关闭标签页或浏览器后数据将被清除。

示例用法类似于localStorage，但是使用sessionStorage对象。

4.方法对比

特性	Cookie	LocalStorage	SessionStorage
存储大小	约 4KB	约 5MB	约 5MB
生命周期	过期时间或手动删除	永久存储，需手动删除	仅在会话期间有效
是否随请求发送	是（默认）	否	否
可被服务器访问	是	否	否
安全性	易受 XSS 攻击（可用 `HttpOnly` 保护）	仅受 XSS 影响	仅受 XSS 影响

Cookie 适用于存储少量数据，如身份验证 Token，而 LocalStorage 适用于长期存储大量数据，SessionStorage 适用于临时存储。

2.保留时间

存储方式	浏览器关闭后数据是否保留	适用场景
Cookie（有 `expires`）	是	跨页面会话、服务器端读取数据（如登录状态）
Cookie（无 `expires`）	否	会话数据存储（Session Cookie）
LocalStorage	是	持久存储大量数据，如用户偏好设置
SessionStorage	否	页面会话内的短期数据

如果需要真正的永久存储，建议使用 LocalStorage 或 带 expires 的 Cookie。

3.存储格式对比

存储方式	形式	访问方式	是否支持对象
Cookie	`key=value; 属性=值`	`document.cookie`（需手动解析）	❌ 只能存字符串
LocalStorage	`{ key: value }`	`localStorage.getItem("key")`	✅ 需 `JSON.stringify()`
SessionStorage	`{ key: value }`	`sessionStorage.getItem("key")`	✅ 需 `JSON.stringify()`

Cookie 存储格式更复杂，包含 expires、path 等属性，适用于跨页面和服务器交互。
LocalStorage 和 SessionStorage 仅支持存储字符串，存对象时需要 JSON.stringify()。
LocalStorage 适用于长期数据，SessionStorage 适用于短期数据（仅会话期间有效）。

如果你的数据是 简单的键值对，LocalStorage 和 SessionStorage 更方便使用。如果需要 跨页面访问并与服务器交互，Cookie 是更好的选择。

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

HTML本地存储