浏览器常用的存储方法：会话，本地，cookie

浏览器存储方法是前端开发中实现数据持久化的重要手段，以下是主要方法的逐步解析：

一、Cookie
1. **特点**：
   - 存储容量约4KB
   - 每次HTTP请求自动携带
   - 可设置过期时间（默认会话级）
   - 遵循同源策略

2. **使用场景**：
   $$document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";$$
   用于保存登录凭证、用户偏好等小数据

3. **缺点**：
   - 易被XSS攻击窃取
   - 影响请求性能（随请求头传输）

二、Web Storage
1. **分类**：
   - `localStorage`：永久存储（需手动清除）
   - `sessionStorage`：会话级存储（标签页关闭即清除）

2. **特点**：
   - 存储容量约5-10MB
   - 仅存字符串，需用JSON转换对象
   - 同步操作，可能阻塞主线程

3. **基础操作**：
   ```javascript
   localStorage.setItem('key', JSON.stringify(obj)); // 存储
   const data = JSON.parse(localStorage.getItem('key')); // 读取
   ```

三、IndexedDB
1. **核心优势**：
   - 支持存储结构化数据（非关系型数据库）
   - 异步操作不阻塞主线程
   - 支持事务、索引查询
   - 存储容量可达硬盘50%以上

2. **典型应用**：
   - 离线应用数据存储
   - 大型文件缓存（如图片、文档）

3. **开发建议**：
   使用`Dexie.js`等库简化原生API操作

四、Cache API
1. **服务端关联**：
   - 配合Service Worker实现
   - 支持网络请求/响应缓存

2. **关键用途**：
   ```javascript
   caches.open('v1').then(cache => {
     cache.addAll(['/style.css', '/app.js']);
   }); // 缓存静态资源
   ```
   实现离线访问、资源预加载

五、对比选型指南
| 方法        | 容量     | 持久性   | 数据结构 | 同步性 |
|-------------|---------|----------|----------|--------|
| Cookie      | 4KB     | 可设置   | 字符串   | 同步   |
| Web Storage | 5-10MB  | 永久/会话| 字符串   | 同步   |
| IndexedDB   | 数百MB+ | 永久     | 结构化   | 异步   |
| Cache API   | 动态分配| 永久     | 二进制   | 异步   |

**安全建议**：
1. 敏感数据应加密存储
2. 设置Cookie的`SameSite`和`HttpOnly`属性
3. 定期清理过期数据
4. 避免XSS漏洞导致存储泄露

根据具体场景选择：
- 用户偏好设置 → Web Storage
- 购物车临时数据 → sessionStorage
- 离线数据库 → IndexedDB
- 静态资源加速 → Cache API

理解这些方法的差异，可帮助开发者构建更高效、安全的Web应用。