localStorage、sessionStorage、cookie 核心区别
一、基本概念
- localStorage：本地持久存储，数据永久保存
- sessionStorage：会话存储，页面关闭数据清除
- cookie：小型文本数据，可设置过期时间
二、核心对比
| 特性 | localStorage | sessionStorage | cookie |
|---|
| 生命周期 | 永久存储 | 会话结束清除 | 可设置过期时间 |
| 存储大小 | 5-10MB | 5-10MB | 约4KB |
| 服务器通信 | 不自动发送 | 不自动发送 | 每次请求自动携带 |
| 作用域 | 同源页面共享 | 同源+同窗口 | 可设域名/路径 |
| 安全性 | 无安全特性 | 无安全特性 | 可设HttpOnly、Secure |
| API | 简单get/set | 简单get/set | 字符串操作 |
三、使用示例
localStorage.setItem('key', 'value');
let val = localStorage.getItem('key');
sessionStorage.setItem('key', 'value');
let val = sessionStorage.getItem('key');
document.cookie = "name=value; max-age=3600; path=/";
四、适用场景
- cookie：身份验证、服务器需读取的数据
- localStorage：用户设置、永久缓存
- sessionStorage：表单草稿、页面间临时数据
