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. 区别总结：
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据大小限制 | 约 4KB | 约 5MB | 约 5MB |
| 生命周期 | 可设置过期时间 | 持久保存，除非手动删除 | 仅在页面会话期间有效 |
| 作用域 | 与域名、路径相关联 | 同一域名下的所有页面共享 | 仅在同一窗口或标签页中共享 |
| 是否随请求发送 | 每次请求都会自动附带发送 | 否 | 否 |
| 常见应用场景 | 会话管理、用户偏好、跟踪用户 | 长期保存的数据、离线 Web 应用 | 临时保存的数据、页面间数据传递 |
PS：图片来源于B站技术蛋老师，侵删
