各种前端存储方式间有什么区别？
1. 内存缓存
// 示例
const memoryCache = {
data: new Map(),
set(key,val){
this.data.set(key,val);
}
}| 特性 | 备注 |
|---|---|
| 存储位置 | RAM（运行时内存） |
| 生命周期 | 页面会话周期（刷新页面后清除） |
| 容量限制 | 受限于可用内存 |
| 访问速度 | 最快（纳秒级） |
| 数据持久化 | 无（关闭页面即消失） |
适用场景：
- 频繁访问的中间计算结果（vue 的 computed 属性）
- 当前会话的临时状态
- 高频使用的配置数据
2. Service Worker
// sw.js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
)
})| 特点 | |
|---|---|
| 存储位置 | 独立于网页的后台线程 |
| 生命周期 | 独立于页面（可后台运行） |
| 容量限制 | 较大（几百 M） |
| 访问速度 | 快（可控制缓存策略） |
| 数据持久化 | 持久（直到手动清除） |
适用场景:
- PWA（渐进式 Web 应用）
- 离线应用
- 网络请求代理
- 后台同步
3. Cache API
// 打开缓存
caches.open('v1').then(cache => {
cache.add('/styles.css') //缓存紫苑
})| 特点 | |
|---|---|
| 存储位置 | 浏览器专用缓存存储 |
| 生命周期 | Request/Response 对象 |
| 容量限制 | 较大（几百 M） |
| 访问速度 | 快（异步） |
| 数据持久化 | 持久（可手动清除） |
适用场景:
- 静态资源缓存
- API 响应缓存
- 离线资源缓存
4. Storage API
// localStorage
localStorage.setItem("theme", "dark")
// sessionStorage
sessionStorage.setItem("temp", "data")| 特点 | |
|---|---|
| 存储位置 | 硬盘（SQLite 数据库） |
| 生命周期 | 键值对（仅字符串） |
| 容量限制 | 5~10M |
| 访问速度 | 慢（同步阻塞） |
| 数据持久化 | localStorage（永久）/sessionStorage（会话） |
适用场景:
- 用户偏好设置
- 表单草稿
- 简单的应用状态
5. IndexedDB
// 异步、支持索引
const req = indexedDB.open('myDB', 1)| 特点 | |
|---|---|
| 存储位置 | 硬盘 |
| 生命周期 | 任何结构化数据（对象、文件等） |
| 容量限制 | 很大（250M+） |
| 访问速度 | 慢（异步非阻塞） |
| 数据持久化 | 持久（可手动清除） |
适用场景:
- 大量结构化数据
- 离线数据存储
- 文件/Blob 存储
- 复杂查询需求