前端存储革命：IndexedDB 从入门到实战

它是什么？为什么是它？

想象你的浏览器里住着一个仓库管理员，IndexedDB 就是这个能帮你管理海量数据的超级管家。相比只能存 5MB 的 localStorage，它能轻松存储几百 MB 甚至 GB 级数据，还能像数据库一样执行复杂查询。

核心优势：

• 离线应用救星：断网时也能查看本地数据（如离线文档编辑器）
• 大胃王存储：轻松应对图片缓存、音视频文件存储
• 闪电查询：通过索引实现毫秒级数据检索
• 事务安全锁：转账操作要么全成功，要么全失败

举个真实案例：当你在某网盘网页版上传 10GB 文件时，即使中途断网，IndexedDB 也会默默保存已上传分片，网络恢复后自动续传。

核心概念大白话

1. 数据库（Database）
   就像银行的金库，每个网站有独立保险柜（同源策略）
2. 对象仓库（Object Store）
   类似 Excel 工作表，存放 JSON 格式的数据记录
3. 索引（Index）
   给数据贴标签，比如给用户表添加「手机号索引」，查号码比翻户口本快 10 倍
4. 事务（Transaction）
   原子操作保护伞，比如删除 A 账户余额和增加 B 账户必须同时成功
5. 游标（Cursor）
   智能扫描仪，能逐条遍历十万条数据不卡顿

手把手代码实战

1. 创建数据库（搭仓库）

const request = indexedDB.open('MyDB', 3); // 版本号很重要！

request.onupgradeneeded = e => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    store.createIndex('phone', 'phone', { unique: true }); // 创建手机号索引
  }
};

注意： 修改表结构必须升级版本号，像给仓库扩建要申请许可证

2. CRUD 操作（存取货物）

// 添加用户
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.add({ id: 1, name: '张三', phone: '13800138000' });

// 查询手机号
const index = store.index('phone');
const request = index.get('13800138000');
request.onsuccess = e => console.log(e.target.result);

3. 高阶技巧

分页查询（仓库分拣术）
用游标实现「跳过前 100 条，取 10 条」的分页效果：

let count = 0;
cursor.advance(100); // 跳过前100条
cursor.continue();

cursor.onsuccess = e => {
  if(count < 10 && cursor.value) {
    console.log(cursor.value);
    count++;
    cursor.continue();
  }
}

四大应用场景

1. 离线编辑器：自动保存未提交的图文内容
2. 电商购物车：存储用户加购的 200 件商品信息
3. 数据可视化：本地缓存 10 万条图表数据
4. PWA 应用：实现秒开的离线页面体验

高频面试题

1. 与 localStorage 有什么区别？
   localStorage 是储物柜，IndexedDB 是智能仓库。前者存小件且只能按钥匙找，后者存大件还能贴标签快速检索。
2. 事务失败会怎样？
   像多米诺骨牌，一个环节出错就全部回滚。比如删除订单同时扣款，若扣款失败订单恢复。
3. 如何高效查询非主键字段？
   提前创建索引，相当于给数据贴彩色便利贴，比如给用户表的「注册时间」加索引，查某天的新用户快如闪电。
4. 最大能存多少数据？
   浏览器默认给 50% 硬盘空间，Chrome 至少保证 250MB，实际能存几十 GB。
5. 数据怎么加密？
   可用 Web Crypto API 先加密再存储，像给货物加上密码箱再入库。

避坑指南

1. 版本管理陷阱
   每次修改表结构都要升级版本号，建议用 semver 规范（如 1.0.0 → 1.1.0）
2. 内存泄漏排查
   用 Chrome DevTools 的 Application 面板查看 IndexedDB 存储情况
3. 老旧浏览器兼容
   使用 Dexie.js 等封装库，自动处理兼容性问题

IndexedDB 就像给浏览器装上了数据库引擎，掌握它能让你的 Web 应用获得原生 App 般的体验。现在打开控制台，试着创建一个存储电影收藏的数据库吧！记住，好的存储方案是用户体验的隐形守护者。