一、保存方式
- 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");