Cookie和localStorage存储的区别

一、保存方式

• Cookie数据存储在客户端（浏览器）和服务器之间，因为它们会在每个HTTP请求中被发送到服务器
• Web Storage数据存储在客户端（浏览器）中，不会每个随着HTTP的请求发送到服务器

二、生命周期

• Cookie可以具有过期时间，可以在浏览器会话结束后保留（会话Cookie）或在特定时间后过期（持久Cookie）
• localStorage除非手动清除否则可以永久保留
  -sessionStorage关闭当前页面或浏览器后失效

三、存储大小

• Cookie4KB，对于小型数据，如会话标识符或少量文本数据，Cookie比较合适
• WebStorage各自可存储5MB或更多的数据

四、用途（使用场景）

• Cookie因每次请求都会携带在http中，用来识别用户登录。通常用于在客户端和服务器之间传递会话标识符、跟踪用户行为和存储小型数据
• Web Storage更适合用于存储本地应用程序、缓存数据、用户首选项等，而不是与服务器通信的标识符
• localStorage可以用来跨页面传参
• sessionStorage可用来保留一些临时数据

五、API

• Cookie:使用document.cookie属性来读取和设置cookie
• Web Storage：使用localStorage和sessionStorage对象来读取和设置数据，它们提供了更方便的API，如setItem、getItem和removeItem等方法。

// 存储数据到localStorage
localStorage.setItem("username", "John");
localStorage.setItem("email", "[email protected]");

// 删除特定数据项
localStorage.removeItem("email");

// 检索和显示数据
var username = localStorage.getItem("username");
var email = localStorage.getItem("email");