一、保存方式
- 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", "john@example.com");
// 删除特定数据项
localStorage.removeItem("email");
// 检索和显示数据
var username = localStorage.getItem("username");
var email = localStorage.getItem("email");