Cookie、localStorage 和 sessionStorage 的区别及应用实例

在前端开发中，持久化数据存储是一个非常常见的需求。为了实现这一点，浏览器提供了多种方式，包括 Cookie、localStorage 和 sessionStorage。这三者各有优劣，适用于不同的场景

1. Cookie

Cookie 是浏览器存储少量数据的一种机制，通常由服务器生成并发送到客户端。每次客户端向同一域名发起请求时，Cookie 都会自动附带在请求头中发送到服务器。

如图所示：

特点：

• 数据大小限制：单个 Cookie 的数据大小限制通常在 4KB 左右。
• 生命周期：Cookie 可以设置 expires 或 max-age 属性来控制其有效期，默认情况下，Cookie 会在会话结束（即浏览器关闭）后删除。
• 作用域：Cookie 与特定的域名和路径关联，可以通过设置 domain 和 path 来控制它的作用范围。
• 安全性：可以通过 Secure 标记仅允许在 HTTPS 连接中传输 Cookie，还可以通过 HttpOnly 标记使 Cookie 无法被 JavaScript 访问，增加安全性。

应用场景：

• 会话管理：例如，登录状态的保持。
• 用户偏好：例如，保存用户的语言设置。
• 跟踪用户行为：例如，第三方分析工具使用 Cookie 进行用户跟踪。

示例：

// 设置一个 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 读取 Cookie
const cookies = document.cookie.split("; ");
cookies.forEach(cookie => {
    const [key, value] = cookie.split("=");
    console.log(`${key}: ${value}`);
});

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

2. localStorage

localStorage 是 HTML5 引入的一种 Web 存储机制，用于持久化保存客户端数据。它的存储是基于键值对的，并且不同域名的 localStorage 是独立的。

特点：

• 数据大小限制：通常为 5MB。
• 生命周期：localStorage 中的数据没有过期时间，除非手动删除，否则数据会一直存在。
• 作用域：localStorage 只能在同一域名下的所有页面共享。

应用场景：

• 长期保存的数据：例如，用户的设置、主题选择等不需要频繁更改的数据。
• 离线 Web 应用：可以用于保存用户在离线时生成的数据。

示例：

// 设置数据
localStorage.setItem('theme', 'dark');

// 读取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出 'dark'

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

// 清空所有数据
localStorage.clear();

3. sessionStorage

sessionStorage 也是 HTML5 引入的 Web 存储机制，与 localStorage 类似，但它的生命周期仅限于浏览器会话期间。关闭浏览器标签页或窗口后，sessionStorage 中的数据就会被清除。

特点：

• 数据大小限制：通常为 5MB。
• 生命周期：数据在页面会话期间有效，页面关闭后数据即被删除。
• 作用域：sessionStorage 只能在同一窗口或标签页中共享，不同的窗口或标签页之间的数据互不影响。

应用场景：

• 临时保存的数据：例如，表单数据的临时保存，以防止页面刷新导致的数据丢失。
• 页面间的数据传递：例如，在多步表单中，传递各步之间的数据。

示例：

// 设置数据
sessionStorage.setItem('sessionData', 'temporaryData');

// 读取数据
const data = sessionStorage.getItem('sessionData');
console.log(data); // 输出 'temporaryData'

// 删除数据
sessionStorage.removeItem('sessionData');

// 清空所有数据
sessionStorage.clear();

4. 区别总结：

PS：图片来源于B站技术蛋老师，侵删