前端开发中最常用的5种本地存储方式总结

最近项目里又在反复纠结本地数据怎么存最合适，就想把前端日常最常碰的几种存储方式捋一遍。

为什么前端需要本地存储？

简单说：提升性能、支持离线、记住用户偏好、减少服务器压力。

比如列表页用户翻了好几页，下次进来还想看到上次位置和筛选；PWA没网也能看点内容；主题暗黑模式、字体大小这些小东西，不想每次请求接口。

服务器传太慢，内存关页就丢，本地存储就成了日常标配。

优秀的前端本地存储该有哪些特性？（参考后端思路，我觉得前端也差不多）

• 容量够用（别5MB就爆）
• 持久性（关浏览器还能剩多少）
• 性能（读写快不快，同步/异步）
• 易用性（API友好不）
• 跨标签共享（多标签能不能同步）
• 结构化支持（对象、数组、Blob、大文件行不行）
• 安全性（同源、隐私模式）

基于这些，2026年现在前端项目里，我最常用来存的其实就这5种（从简单到复杂排）：

1. localStorage

最基础、最常用，几乎每个项目都逃不开。

怎么用（大家都知道，但还是贴代码）：

// 存
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封装，这里先贴原生）：

// 打开数据库
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里）：

// 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）：

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（强烈推dexie.js）
• PWA/静态资源 → Cache API + Service Worker
• 页面内高速复用 → 内存LRU

项目里我现在基本这么分层：小配置local，临时session，大数据IndexedDB，资源Cache，内存加速。

覆盖了95%的场景，不会再纠结了。

总结

到此这篇关于前端开发中最常用的5种本地存储方式的文章就介绍到这了,更多相关前端本地存储方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论