最近项目里又在反复纠结本地数据怎么存最合适，就想把前端日常最常碰的几种存储方式捋一遍。
为什么前端需要本地存储？
简单说：提升性能、支持离线、记住用户偏好、减少服务器压力。
比如列表页用户翻了好几页，下次进来还想看到上次位置和筛选；PWA没网也能看点内容；主题暗黑模式、字体大小这些小东西，不想每次请求接口。
服务器传太慢，内存关页就丢，本地存储就成了日常标配。
优秀的前端本地存储该有哪些特性？（参考后端思路，我觉得前端也差不多）
- 容量够用（别5MB就爆）
- 持久性（关浏览器还能剩多少）
- 性能（读写快不快，同步/异步）
- 易用性（API友好不）
- 跨标签共享（多标签能不能同步）
- 结构化支持（对象、数组、Blob、大文件行不行）
- 安全性（同源、隐私模式）
基于这些，2026年现在前端项目里，我最常用来存的其实就这5种（从简单到复杂排）：
1. localStorage
最基础、最常用，几乎每个项目都逃不开。
怎么用（大家都知道，但还是贴代码）：
js
// 存
localStorage.setItem('userTheme', 'dark');
// 取
const theme = localStorage.getItem('userTheme');
// 删
localStorage.removeItem('userTheme');
// 清空
localStorage.clear();容量 ：一般5MB左右（Chrome、Safari、Firefox差不多）
持久性 ：永久，除非用户手动清浏览器缓存。
优缺点：
- 优点：API极简，同步操作，跨标签共享（改一个，其他标签能通过storage事件监听到）
- 缺点：只能存字符串（对象要JSON.stringify），同步大点数据会卡主线程，隐私模式下可能被清，iOS Safari有时莫名其妙丢数据
真实场景：用户设置（主题、侧边栏状态）、token应急存、简单购物车草稿
2. sessionStorage
跟localStorage几乎一样，但会话级。
代码 ：把localStorage换成sessionStorage就行，用法一模一样。
容量 ：5MB左右
持久性 ：标签页关了就没了（同窗口新tab共享）
优缺点：
- 优点：临时数据不污染长期，安全性稍好（自动销毁）
- 缺点：不能跨标签持久共享
3. IndexedDB
大容量、结构化数据的王者，PWA/离线必备，现在中大型项目越来越多往这儿搬。
基本用法（原生API啰嗦，实际我基本用dexie.js或idb封装，这里先贴原生）：
js
// 打开数据库
const request = indexedDB.open('myAppDB', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
};
request.onsuccess = (event) => {
const db = event.target.result;
// 操作...
};
// 存数据（事务）
function addTodo(todo) {
const tx = db.transaction('todos', 'readwrite');
const store = tx.objectStore('todos');
store.add(todo);
}容量 ：很大，通常几百MB到GB（视磁盘空间，浏览器配额管理，远超5MB）
持久性 ：永久，但空间紧张时浏览器可能清（比localStorage难清）
优缺点：
- 优点：异步不卡线程、支持复杂对象/Blob/文件、索引查询、事务
- 缺点：原生API回调地狱，学习曲线陡（推荐封装）
4. Cache API（配合Service Worker）
资源缓存神器，PWA性能核心。
基本用法（必须在sw.js里）：
js
// sw.js install事件
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-app-v1').then(cache => {
return cache.addAll([
'/styles.css',
'/app.js',
'/images/logo.png'
]);
})
);
});
// fetch拦截
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});容量 ：跟IndexedDB一样，受配额管理，很大
持久性 ：持久，但可被浏览器清理
优缺点：
- 优点：专为资源设计（html/css/js/img），拦截请求方便，支持离线秒开
- 缺点：只能存Request/Response，不适合业务JSON；依赖Service Worker（https或localhost）
真实场景：PWA壳子、静态资源离线、图片懒加载备用、H5页面缓存
5. 内存缓存（JS对象/Map + 简单LRU）
页面内最快，临时数据首选。
简单实现（项目里常用mini LRU）：
js
class SimpleLRU {
constructor(max = 100) {
this.max = max;
this.cache = new Map();
}
get(key) {
if (!this.cache.has(key)) return null;
const value = this.cache.get(key);
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
set(key, value) {
if (this.cache.has(key)) this.cache.delete(key);
this.cache.set(key, value);
if (this.cache.size > this.max) {
const oldest = this.cache.keys().next().value;
this.cache.delete(oldest);
}
}
}
// 用法
const pageCache = new SimpleLRU(50);
pageCache.set('userListPage1', data);容量 ：内存大小，取决于JS堆
持久性 ：页面刷新/关闭就没了
优缺点：
- 优点：纳秒级、无序列化、最快
- 缺点：不持久、内存泄漏风险
整体对比一图概览
| 维度 | localStorage | sessionStorage | IndexedDB | Cache API | 内存缓存 |
|---|---|---|---|---|---|
| 易用性 | ★★★★★ | ★★★★★ | ★★☆☆☆ | ★★★☆☆ | ★★★★☆ |
| 容量 | ★★☆☆☆ (5MB) | ★★☆☆☆ | ★★★★★ | ★★★★★ | ★☆☆☆☆ |
| 持久性 | ★★★★★ | ★☆☆☆☆ | ★★★★★ | ★★★★☆ | ★☆☆☆☆ |
| 性能 | ★★★☆☆ | ★★★☆☆ | ★★★★☆ | ★★★★★ | ★★★★★ |
| 结构化支持 | ★☆☆☆☆ | ★☆☆☆☆ | ★★★★★ | ★★☆☆☆ | ★★★★☆ |
| 适用规模 | 小配置 | 临时会话 | 中大型离线 | 资源/PWA | 页面内临时 |
最后选型建议（我自己的经验）
- 简单配置、偏好 → localStorage
- 临时表单/状态 → sessionStorage
- 大量业务数据、离线 → IndexedDB（强烈推dexie.js）
- PWA/静态资源 → Cache API + Service Worker
- 页面内高速复用 → 内存LRU
项目里我现在基本这么分层：小配置local，临时session，大数据IndexedDB，资源Cache，内存加速。
覆盖了95%的场景，不会再纠结了。