什么是Cookie？
-
存储容量：一般限制在 4KB 以内。
-
数据有效期：可以设置过期时间，若未设置，则在浏览器关闭时失效。
-
数据共享 ：在同一域名下，不同页面可以共享
cookie数据。并且在每次 HTTP 请求时，cookie会被发送到服务器端。 -
数据存储和读取 ：需要手动解析和设置
document.cookie字符串。 -
在HTTP明文传输中不够安全，容易被修改。
-
每次请求都会携带Cookie数据增加流量浪费性能。
-
示例代码：
// 存储数据
document.cookie = 'name=daxiaojiuhenpi; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';
// 读取数据
function getCookie(name) {
const value =; ${document.cookie};
const parts = value.split(; ${name}=);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const name = getCookie('name');
console.log(name);
什么是Local Storage？
-
存储容量：一般为 5MB 左右，不同浏览器可能存在差异。
-
数据有效期：除非手动删除，否则数据不会过期，会一直存储在浏览器中。
-
数据共享 ：在同一域名下，不同页面可以共享
localStorage数据。 -
数据存储和读取 ：使用
setItem方法存储数据，getItem方法读取数据。 -
不支持在不同浏览器共享数据。
-
一网站只能访问自己域下的LS。
-
示例代码：
// 存储数据
localStorage.setItem('username', '打小就很皮');
// 读取数据
const username = localStorage.getItem('username');
console.log(username);
什么是Session Storage？
-
存储容量 ：与
localStorage类似，通常为 5MB 左右。 -
数据有效期：数据仅在当前会话期间有效，当页面关闭后，数据会被清除。
-
数据共享：仅在同一窗口（或标签页）的不同页面间共享数据，不同窗口（或标签页）的数据是相互独立的。
-
数据存储和读取 ：使用
setItem方法存储数据，getItem方法读取数据。 -
示例代码：
// 存储数据
sessionStorage.setItem('token', 'DGBjbjbg35bhjbuydsatdgry3bd8t');
// 读取数据
const token = sessionStorage.getItem('token');
console.log(token);
差异总结：不同点
| Cookie | Local Storage | Session Storage | |
|---|---|---|---|
| 存储内容是否发送到服务端 | 每请求都发回 | 只保存在本地 | |
| 数据存储大小 | 不超过4KB | 达到5MB | |
| 数据存储有效期 | 自行设置失效时间 | 永久有效 | 关闭浏览器前有效 |
| 作用域 | 同源同窗口都是共享 | 不同窗口不共享 |