localStorage 的使用越来越少了？-优快云博客

今天，我们必须正视一个问题：对于任何严肃的 Web 应用项目，继续依赖 localStorage 已成为一种技术债。是时候丢掉这根“拐杖”，全面拥抱更强大、更专业的 IndexedDB 了。

是时候丢掉 localStorage，拥抱 IndexedDB 了

在 Web 开发的世界里，localStorage 曾是我们的老朋友。它简单易用，为早期的 Web 应用提供了一种在浏览器端持久化存储少量数据的便捷方式。然而，随着现代 Web 应用变得越来越复杂，对离线工作和富媒体处理的需求日益增长，localStorage 的局限性也暴露无遗。

今天，我们必须正视一个问题：对于任何严肃的 Web 应用项目，继续依赖 localStorage 已成为一种技术债。是时候丢掉这根“拐杖”，全面拥抱更强大、更专业的 IndexedDB 了。

一、 localStorage 的“罪与罚”：为什么它不再够用？

我们曾如此喜爱 localStorage 的简单：

// 存
localStorage.setItem('user', JSON.stringify(user));

// 取
const user = JSON.parse(localStorage.getItem('user'));

但正是这种简单，在现代应用场景下变成了它的“原罪”：

极小的存储容量（约 5MB）：在动辄几 MB 的配置文件、用户生成内容、缓存数据的今天，5MB 的容量上限如同杯水车薪。一次不小心的 setItem 就可能抛出 QuotaExceededError 异常，导致整个应用崩溃。
纯字符串的“牢笼”：localStorage 只能存储字符串。任何复杂的数据结构（如对象、数组、日期、文件）都必须通过 JSON.stringify 和 JSON.parse 进行序列化和反序列化。这个过程不仅性能低下，而且会丢失数据类型（例如，日期对象会变成字符串）。
阻塞式同步 API：localStorage 的所有操作都是同步的。这意味着当你读写一个稍大的数据时，整个 JavaScript 主线程会被阻塞，导致页面卡顿、无响应，严重影响用户体验。
缺乏结构化查询能力：你无法对存储的数据进行复杂的查询。如果你想从存储的用户列表中查找所有年龄大于 18 岁的用户，你必须将整个列表取出、解析，然后在内存中遍历——这是一个极其低效的过程。

简而言之，localStorage 就像一辆小巧的共享单车，适合短途代步（存点 token、用户偏好），但你绝不能指望它来运送集装箱（应用状态、缓存文件、离线数据）。

二、 IndexedDB：为现代 Web 应用而生的数据库

IndexedDB 不是一个简单的键值存储，它是一个完整的、事务型的、非关系型数据库。让我们来看看它如何完美地解决了 localStorage 的所有痛点：

海量存储空间 浏览器通常为每个源提供至少几十 MB，甚至数百 MB 或更多的存储空间（取决于用户磁盘和浏览器策略）。这使得存储大量数据，如图片、音频、视频文件，甚至整个应用的离线包成为可能。
存储原生 JavaScript 对象 IndexedDB 可以直接存储大多数 JavaScript 对象类型，如对象、数组、Date、File、Blob 等，无需复杂的序列化。这意味着存进去一个 Date，取出来还是 Date。
异步和非阻塞 所有 IndexedDB 操作都是异步的。它们不会阻塞用户界面，你的应用可以保持流畅的交互，同时在后台处理庞大的数据读写任务。
强大的索引和查询能力 这是 IndexedDB 的核心优势。你可以为数据对象的不同属性创建索引，从而实现高性能的搜索、范围和排序操作。

// 例如，在“用户”仓库中，为“age”字段创建索引
const store = transaction.objectStore('users');
const index = store.index('age');
const request = index.getAll(IDBKeyRange.lowerBound(18)); // 获取所有年龄>=18的用户

5.事务支持 IndexedDB 支持事务，确保一系列数据库操作要么全部成功，要么全部失败，维护了数据的完整性和一致性。

三、实战对比：从“购物车”看差异

假设我们要实现一个功能丰富的购物车。

使用 localStorage：

let cart = JSON.parse(localStorage.getItem('cart')) || [];
// 添加一个商品
cart.push(newItem);
// 为了更新，必须重写整个购物车
localStorage.setItem('cart', JSON.stringify(cart));
// 查找特定商品？需要遍历整个 cart 数组。
// 数据量大时，每次操作都会引起卡顿。

使用 IndexedDB：

// 打开数据库，在事务中操作“cart”仓库
const transaction = db.transaction(['cart'], 'readwrite');
const store = transaction.objectStore('cart');
// 添加商品，无需重写整个列表
store.add(newItem);
// 通过商品ID快速查询
store.get(productId).onsuccess = (event) => {
  console.log('找到商品:', event.target.result);
};
// 异步操作，UI 无阻塞

四、拥抱 IndexedDB：从今天开始

诚然，IndexedDB 的 API 以“丑陋”和“复杂”著称。直接使用原生 API 确实令人望而生畏。但好消息是，我们不必如此。

使用优秀的封装库是标准做法。

这些库极大地简化了 IndexedDB 的使用，让你能像操作一个熟悉的 JavaScript 对象或集合一样与数据库交互：

Dexie.js：最受欢迎的 IndexedDB 封装库，提供了优雅、简洁的 API。

// 使用 Dexie，代码变得清晰易懂
const db = new Dexie('MyAppDB');
db.version(1).stores({
  friends: '++id, name, age'
});
await db.friends.add({name: '张三', age: 25});
const youngFriends = await db.friends.where('age').below(18).toArray();