面试官：我为什么总在浏览器存储问题上追问IndexedDB？

前言

面试官："聊聊浏览器存储吧。" 我："Cookie, LocalStorage..." 面试官："然后呢？IndexedDB 了解吗？" 我："..."

作为一名前端面试官，我有一个"压箱底"的问题，它像一面镜子，能清晰地照出一位候选人的知识深度和项目经验："如果 localStorage 的 5MB 存储空间不够用了，你会怎么办？"

大多数候选人的回答，都会熟练地沿着"浏览器存储"的图谱展开：从会"自动上门"的 Cookie，到简单易用的 localStorage 和 sessionStorage。他们对这些"基础知识"对答如流。

但对话往往在这里陷入沉默。

当我接着追问："那么，IndexedDB 呢？"

我看到的，常常是略显迷茫的眼神，或是仅停留在"听说过"层面的浅尝辄止。有的候选人能说出"它是一个大型数据库"，但一旦深入问到事务、索引、版本升级这些核心概念，场面便迅速从自信转向了迟疑。

这让我深感可惜。

因为在今天这个追求极致用户体验的时代，离线应用、复杂的本地数据缓存、富媒体编辑等场景层出不穷，这些恰恰都是 IndexedDB 的"主场"。对于一个有志于成为资深前端开发的工程师而言，掌握 IndexedDB 不再是一个加分项，而是一项至关重要的核心竞争力。

它代表着你能处理更复杂的数据逻辑，能设计出更流畅的离线体验，能真正驾驭浏览器赋予我们的强大能力。

所以，这篇博客，我想和你彻底聊透这个在面试中"一击必杀"的技术。我们不仅会回顾那些你"熟悉的老朋友"，更将深入 IndexedDB 的腹地，从核心概念到实战代码，让你真正理解：

为什么在 localStorage 看似"够用"的今天，我们仍需 IndexedDB？

如何用原生 API 操作 IndexedDB，以及为什么你最终应该选择一个封装库？

它在哪些真实的、高价值的业务场景中不可替代？

别再让你的知识体系停留在 5MB 的边界。让我们开始这次探索，希望在下一次面试中，当谈到浏览器存储时，你能自信地接过话题，从 Cookie 娓娓道来，最终在 IndexedDB 上闪耀出与众不同的技术光芒。

浏览器存储全景图：为什么 IndexedDB 是你的终极选择？

在前端开发中，数据存储是一个永恒的话题。从简单的用户偏好设置到复杂的离线应用，我们都需要在浏览器端妥善地管理数据。你可能用过 cookie，用过 localStorage，但今天我们要深入探讨的是浏览器存储领域的"重型武器"------ IndexedDB。

一、浏览器存储方案快速回顾

在选择 IndexedDB 之前，我们先来快速了解一下其他几位"老朋友"：

Cookie
- 大小：约 4KB
- 生命周期：可设置过期时间，否则随会话结束而消失。
- 特性：每次请求都会自动携带至服务器，增加流量消耗。
- 用途：主要用于身份认证、会话管理等服务器端相关需求。
Web Storage (localStorage 和 sessionStorage)
- 大小：约 5MB（因浏览器而异）。
- 生命周期 ：
  - localStorage: 持久存储，除非手动清除。
  - sessionStorage: 页面会话期间有效，关闭标签页即消失。
- 特性：简单的键值对存储，同步操作，会阻塞主线程。仅能存储字符串。
- 用途：适合存储小量、简单的数据，如用户主题设置、表单草稿等。
WebSQL (已废弃)
- 一个类似于 SQLite 的关系型数据库。W3C 已不再维护该规范，不推荐使用。

当你的需求超出了 localStorage 的能力范围时，就该 IndexedDB 登场了。

二、什么是 IndexedDB？

IndexedDB 是一个运行在浏览器中的事务型、NoSQL 数据库。它可以让你在用户的浏览器中持久化存储大量结构化数据。

它的核心特点：

巨大的存储空间 ：存储空间通常远大于 localStorage（一般是浏览器可用空间的50%以上，不同浏览器有差异）。
非关系型 (NoSQL)：数据以"对象存储"的形式存放，而不是表格。
异步操作：所有操作都是异步的，不会阻塞浏览器界面，提供了更好的性能体验。
支持事务：所有数据操作都在事务上下文中进行，保证了数据的一致性。
同源策略：每个源（域名+端口）都有自己的数据库，不能跨域访问。
支持索引：可以基于对象的属性创建索引，实现高性能的查询。

三、为什么你需要 IndexedDB？（适用场景）

在以下场景中，IndexedDB 是无可替代的选择：

离线 Web 应用：存储大量数据（如文档、邮件、笔记）供用户在离线时使用，联网后再同步。
缓存大型数据：缓存从服务器获取的复杂数据（如产品目录、用户历史记录），提升二次加载速度。
富媒体应用：存储图片、音频、视频的二进制数据甚至文件。
需要复杂查询的应用：比如一个本地的日志分析工具，需要按时间、级别等多种条件筛选。

四、 IndexedDB 核心概念剖析

理解 IndexedDB 的关键是掌握以下几个核心概念：

数据库
- 顶层容器，每个数据库有一个唯一的名字和版本号。版本升级是修改数据库结构的唯一方式（如创建对象存储、索引）。
对象存储
- 相当于 SQL 数据库中的"表"。它是一个用于存储对象的容器。每个对象存储需要一个唯一的"键"来标识每个对象。
索引
- 在对象存储上创建的、基于对象属性的查找表。它允许你通过该属性的值来快速检索对象，而无需扫描整个存储。
事务
- 任何对数据库的读写操作都必须发生在事务中。事务提供了"全有或全无"的保证，确保数据操作的原子性。事务有三种模式：readonly、readwrite 和 versionchange。
游标
- 一种机制，用于遍历对象存储或索引中的多条记录，特别适合处理大量数据。

五、实战：一个简单的 IndexedDB 示例

让我们通过代码来感受一下如何使用 IndexedDB。假设我们要创建一个"个人笔记"应用。

1. 打开/创建数据库

javascript 复制代码

const request = indexedDB.open('MyNotesDB', 1); // 数据库名，版本号

let db;

request.onerror = (event) => {
    console.error('为什么出错了！', event.target.error);
};

request.onsuccess = (event) => {
    db = event.target.result; // 数据库实例
    console.log('数据库打开成功！');
    // 可以开始操作数据了
};

// 这个事件仅在数据库版本升级时触发（比如第一次创建，或版本号增加）
request.onupgradeneeded = (event) => {
    const db = event.target.result;

    // 检查对象存储是否已经存在
    if (!db.objectStoreNames.contains('notes')) {
        // 创建一个名为 'notes' 的对象存储，主键是 'id'
        const objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });

        // 创建一个在 'title' 属性上的索引
        objectStore.createIndex('title', 'title', { unique: false });
        objectStore.createIndex('createdAt', 'createdAt', { unique: false });

        console.log('对象存储和索引创建完毕！');
    }
};

2. 添加数据

javascript 复制代码

function addNote(note) {
    // 开启一个读写事务
    const transaction = db.transaction(['notes'], 'readwrite');
    const objectStore = transaction.objectStore('notes');

    const request = objectStore.add(note);

    request.onsuccess = () => {
        console.log('笔记已添加');
    };

    request.onerror = () => {
        console.error('添加笔记失败：', request.error);
    };
}

// 使用
addNote({
    title: '我的第一篇博客',
    body: '这是博客的内容...',
    tags: ['技术', 'IndexedDB'],
    createdAt: new Date()
});

3. 通过主键读取数据

javascript 复制代码

function getNote(id) {
    const transaction = db.transaction(['notes']);
    const objectStore = transaction.objectStore('notes');
    const request = objectStore.get(id);

    request.onsuccess = () => {
        if (request.result) {
            console.log('找到笔记：', request.result);
        } else {
            console.log('未找到对应笔记');
        }
    };
}

4. 通过索引查询数据

javascript 复制代码

function getNotesByTitle(title) {
    const transaction = db.transaction(['notes']);
    const objectStore = transaction.objectStore('notes');
    const index = objectStore.index('title'); // 使用 'title' 索引

    const request = index.getAll(title); // 获取所有 title 匹配的笔记

    request.onsuccess = () => {
        console.log(`标题包含 "${title}" 的笔记：`, request.result);
    };
}

5. 使用游标遍历所有数据

javascript 复制代码

function getAllNotes() {
    const transaction = db.transaction(['notes']);
    const objectStore = transaction.objectStore('notes');
    const request = objectStore.openCursor(); // 打开游标
    const allNotes = [];

    request.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            allNotes.push(cursor.value); // 将当前数据加入数组
            cursor.continue(); // 移动到下一条记录
        } else {
            // 遍历结束
            console.log('所有笔记：', allNotes);
        }
    };
}

六、优缺点总结

特性	优点	缺点
容量	非常大，可存储大量数据
性能	异步，不阻塞UI	API 冗长、复杂，回调地狱（可用 Promise 包装）
数据类型	支持 JavaScript 对象、文件、Blob 等
查询能力	支持索引，查询高效	学习曲线陡峭，概念较多
事务	提供 ACID 保证

七、现代开发的最佳实践：使用库

由于原生 API 非常底层和繁琐，社区诞生了许多优秀的库来简化操作。强烈推荐使用它们：

Dexie.js：最流行的 IndexedDB 封装库，提供了清爽、链式的 API。
idb：一个轻量级的、基于 Promise 的包装器，由 Jake Archibald 开发。

使用 Dexie.js，上面的代码可以简化为：

javascript 复制代码

// 定义数据库
const db = new Dexie('MyNotesDB');
db.version(1).stores({
    notes: '++id, title, createdAt' // 主键是自增的id，并创建索引
});

// 添加笔记
await db.notes.add({
    title: '使用Dexie真方便',
    body: '...',
    createdAt: new Date()
});

// 查询笔记
const techNotes = await db.notes.where('title').startsWithIgnoreCase('技术').toArray();

结语

IndexedDB 是浏览器赋予前端开发者的强大工具。虽然它 API 复杂，但其在处理大规模、结构化本地数据的场景下是无可匹敌的。对于大多数严肃的项目，通过 Dexie.js 这样的库来使用 IndexedDB，可以极大地提升开发效率和代码可维护性。

下次当你需要在前端存储远超 localStorage 上限的数据时，别再犹豫了，IndexedDB 就是你正在寻找的答案。

面试官：我为什么总在浏览器存储问题上追问IndexedDB？

前言

浏览器存储全景图：为什么 IndexedDB 是你的终极选择？

一、 浏览器存储方案快速回顾

二、 什么是 IndexedDB？

三、 为什么你需要 IndexedDB？（适用场景）

四、 IndexedDB 核心概念剖析

五、 实战：一个简单的 IndexedDB 示例

六、 优缺点总结

七、 现代开发的最佳实践：使用库

结语

一、浏览器存储方案快速回顾

二、什么是 IndexedDB？

三、为什么你需要 IndexedDB？（适用场景）

五、实战：一个简单的 IndexedDB 示例

六、优缺点总结

七、现代开发的最佳实践：使用库