Cookie、本地存储和会话存储

这是前端面试问题系列的第 6 篇文章。如果您希望提高准备水平或保持最新状态，请考虑注册前端训练营。

---

Cookie、本地存储和会话存储都用于在客户端存储数据。这些机制对于存储身份验证令牌或仅限客户端的状态（例如主题或个性化设置）特别有用。所有三种存储类型都具有以下特征：

1. 它们将数据存储为键值对。
2. 所有值都以字符串格式存储。如果值不是字符串，则会在存储之前对其进行序列化。
3. 客户端可以访问存储在这些机制中的数据（HttpOnly cookie 除外）。

曲奇饼

Cookie 无法存储大量数据；每个域的存储上限约为 4KB。存在此限制是因为 cookie 会随着浏览器发出的每个请求自动发送到服务器。在 cookie 中存储过多的客户端数据会增加负载大小，从而对性能产生负面影响。

我们应该在 Cookie 中存储什么样的数据？
Cookie 非常适合存储需要传输到服务器的数据，例如身份验证令牌、会话 ID、分析 ID 和类似信息。此外，cookie 允许在同一域或子域的不同选项卡或窗口之间共享数据。

您可以使用各种标志来配置 cookie，以调整其行为或加强安全性：

• HttpOnly 确保客户端无法通过 JavaScript 访问 cookie，从而降低 XSS 攻击的风险。
• maxAge/expires 指定 cookie 的到期日期。如果未设置到期日期，则关闭浏览器时将删除 cookie。

想要了解有关 cookie 标志的更多信息吗？查看我的 LinkedIn 帖子。

与本地存储和会话存储不同，cookie 也可以由服务器使用 Set-Cookie 标头来设置（读取：“添加”）。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

本地存储

与 cookie 不同，localStorage 提供更大的存储容量，每个域大约 5MB。这是因为 localStorage 是为存储长期数据而设计的。即使浏览器关闭，它也会保留数据，使其成为持久客户端存储需求的理想选择。

那么我们应该在localStorage中存储什么样的数据呢？
localStorage 最适合存储仅在客户端使用且不需要每次请求都发送到服务器的数据。一些示例是用户登录之前添加到购物车中的网站或产品的主题。

存储在 localStorage 中的数据将无限期地保留，直到用户手动删除它或网站使用 JavaScript 清除它。

与 cookie 类似，localStorage 中的数据可以在同源的所有选项卡或窗口中访问，这使得它对于在域内共享客户端状态非常有用。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

会话存储

sessionStorage 用于存储短暂的客户端数据。与 localStorage 一样，它为每个域提供约 5MB 的存储容量，并共享相同的 API。

虽然 sessionStorage 和 localStorage 具有相似的功能，但它们在两个关键方面有所不同：数据持久性和可访问性。
与 localStorage 不同，一旦选项卡或浏览器关闭，sessionStorage 就不会保留数据。此外，存储在 sessionStorage 中的数据与创建它的特定选项卡或窗口隔离，这意味着来自同一来源的其他选项卡或窗口无法访问它。

那么 sessionStorage 的用例是什么？
sessionStorage 非常适合存储仅单个会话所需的数据。例如，假设用户填写了一份长表单，但意外刷新了页面。如果表单数据存储在 sessionStorage 中，它将在刷新过程中持续存在，从而允许用户继续操作而不会丢失进度。

但是，请务必注意，在其他选项卡中或关闭选项卡后将无法访问此数据。

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

虽然cookie会自动包含在浏览器发送的每个请求中，但存储在localStorage或sessionStorage中的数据可以通过编写自定义代码手动传输到服务器。

---

概括

1. Cookie、localStorage 和 sessionStorage 用于在客户端存储数据。
2. Cookie 是唯一可以由服务器使用 Set-Cookie 响应标头进行设置的存储形式。
3. Cookie 会随着每个请求自动发送到服务器。
4. 与 cookie (4KB) 相比，localStorage 和 sessionStorage 的存储空间明显更大 (5MB)。这两个存储共享相同的 API 接口。
5. Cookie 有有效期，如果没有有效期，它们会在浏览器关闭时被清除。
6. localStorage 数据会无限期保留，除非由用户或网站本身手动清除。
7. sessionStorage 数据在会话结束后（即选项卡或窗口关闭时）被清除。

---

喜欢你刚刚读到的内容吗？考虑看看前端训练营✌️

以上是Cookie、本地存储和会话存储的详细内容。更多信息请关注PHP中文网其他相关文章！