浏览器存储 Cookie，Local Storage和Session Storage
什么是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 | |
| 数据存储有效期 | 自行设置失效时间 | 永久有效 | 关闭浏览器前有效 |
| 作用域 | 同源同窗口都是共享 | 不同窗口不共享 | |