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站技术蛋老师，侵删