登录
首页 >  文章 >  前端

JS操作IndexedDB基础教程

时间：2025-08-02 13:58:31 270浏览 收藏

学习文章要努力，但是不要急！今天的这篇文章《JS操作IndexedDB入门教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

IndexedDB是浏览器提供的客户端存储方案，支持大量结构化数据的存储与复杂操作；2. 操作核心步骤包括：通过indexedDB.open()打开或创建数据库；在onupgradeneeded事件中创建对象仓库和索引；启动事务进行增删改查；3. 所有操作均为异步，需通过事件监听处理结果，建议使用Promise封装以提升代码可读性；4. 事务具有原子性、一致性、隔离性和持久性，确保数据完整性；5. 相较于LocalStorage（简单键值对、同步、容量小）、Web SQL（已废弃），IndexedDB适合存储大量结构化数据、支持索引查询和事务，是构建离线应用和PWA的理想选择。

js如何操作indexedDB

IndexedDB是浏览器提供的一种客户端存储方案，它允许你在用户的浏览器中存储大量结构化数据。不同于简单的LocalStorage或SessionStorage，IndexedDB提供了一个完整的事务型数据库系统，这意味着你可以进行复杂的查询、索引和事务操作。通过JavaScript来操作它，本质上就是利用它提供的一系列异步API，从数据库的打开、升级，到数据的增删改查，都需要通过请求（request）和事件监听（event listeners）来处理异步结果。在我看来，理解它的异步特性和事务机制是高效使用的关键。

js如何操作indexedDB

解决方案

操作IndexedDB通常涉及以下几个核心步骤和概念：

  1. 打开或创建数据库实例： 这是所有操作的起点。你通过indexedDB.open()方法来尝试连接一个数据库。如果数据库不存在，它就会被创建；如果存在，则直接打开。这个方法会返回一个IDBOpenDBRequest对象。

    js如何操作indexedDB
    const DB_NAME = 'myAppData';
const DB_VERSION = 1; // 数据库版本号，用于控制onupgradeneeded事件

let db;
const request = indexedDB.open(DB_NAME, DB_VERSION);

request.onerror = (event) => {
    console.error("数据库打开失败:", event.target.errorCode);
    // 实际应用中，这里可能需要给用户一个提示
};

request.onsuccess = (event) => {
    db = event.target.result;
    console.log("数据库打开成功");
    // 数据库实例db现在可用，可以开始进行数据操作
};

  2. 处理数据库版本升级与初始化（onupgradeneeded）： 当indexedDB.open()方法的版本号高于当前浏览器中已存在的数据库版本时，onupgradeneeded事件就会被触发。这是你创建或修改对象仓库（Object Store）和索引（Index）的唯一时机。

    request.onupgradeneeded = (event) => {
    const db = event.target.result;
    console.log("数据库升级或初始化...");

    // 创建一个名为 'users' 的对象仓库，keyPath指定主键
    if (!db.objectStoreNames.contains('users')) {
        const userStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
        // 为 'users' 对象仓库创建索引，例如按 'name' 字段查找
        userStore.createIndex('nameIndex', 'name', { unique: false });
        console.log("对象仓库 'users' 和索引 'nameIndex' 已创建。");
    }

    // 也可以创建其他对象仓库，例如 'products'
    if (!db.objectStoreNames.contains('products')) {
        const productStore = db.createObjectStore('products', { keyPath: 'productId' });
        productStore.createIndex('priceIndex', 'price', { unique: false });
        console.log("对象仓库 'products' 和索引 'priceIndex' 已创建。");
    }

    // 如果要删除一个旧的objectStore，也可以在这里操作
    // if (db.objectStoreNames.contains('oldStore')) {
    //     db.deleteObjectStore('oldStore');
    // }
};

    这个事件非常关键，它确保了数据库结构在不同版本间的平滑过渡。

    js如何操作indexedDB

  3. 启动事务（Transaction）： 所有对IndexedDB数据的读写操作都必须在一个事务中进行。事务确保了操作的原子性，要么全部成功，要么全部失败。

    // 假设 db 实例已经成功获取
if (db) {
    const transaction = db.transaction(['users'], 'readwrite'); // 指定要操作的对象仓库和事务模式
    // 'readonly' 只读模式
    // 'readwrite' 读写模式

    transaction.oncomplete = () => {
        console.log("事务完成！");
    };

    transaction.onerror = (event) => {
        console.error("事务失败:", event.target.error);
    };

    // 获取对象仓库
    const userStore = transaction.objectStore('users');

    // 示例：添加数据
    const userData = { id: 1, name: '张三', age: 30, email: 'zhangsan@example.com' };
    const addRequest = userStore.add(userData); // add用于添加新数据，如果key已存在会报错

    addRequest.onsuccess = () => {
        console.log("用户张三添加成功！");
    };
    addRequest.onerror = (event) => {
        console.error("添加用户失败:", event.target.error);
    };

    // 示例：更新数据（put用于添加或更新）
    const updatedUserData = { id: 1, name: '张三丰', age: 100, email: 'zhangsanfeng@example.com' };
    const putRequest = userStore.put(updatedUserData);
    putRequest.onsuccess = () => {
        console.log("用户张三更新成功！");
    };

    // 示例：获取数据
    const getRequest = userStore.get(1); // 通过主键获取
    getRequest.onsuccess = (event) => {
        console.log("获取用户:", event.target.result);
    };

    // 示例：删除数据
    const deleteRequest = userStore.delete(1); // 通过主键删除
    deleteRequest.onsuccess = () => {
        console.log("用户1删除成功！");
    };

    // 示例：使用索引查询
    const nameIndex = userStore.index('nameIndex');
    const getByNameRequest = nameIndex.get('张三丰');
    getByNameRequest.onsuccess = (event) => {
        console.log("通过索引获取用户:", event.target.result);
    };

    // 示例：遍历所有数据（游标）
    const cursorRequest = userStore.openCursor();
    cursorRequest.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            console.log("游标数据:", cursor.value);
            cursor.continue(); // 继续遍历下一条
        } else {
            console.log("所有数据遍历完毕。");
        }
    };
} else {
    console.warn("数据库实例尚未准备好。");
}

    我个人觉得，IndexedDB的事务机制是它强大但有时也令人感到“麻烦”的地方，因为每一步操作都得在事务里，并且是异步的。但这正是它能保证数据完整性的核心。

如何正确处理IndexedDB的异步操作和错误？

IndexedDB的所有操作都是异步的，并且基于事件回调。这意味着你不能像操作普通变量那样立即得到结果，而是需要等待onsuccess或onerror事件触发。这种模式在处理复杂逻辑时，很容易陷入“回调地狱”，或者说，代码的嵌套层级会变得很深，可读性下降。

为了更好地管理异步操作，我通常会考虑以下几种策略：

  1. Promise化封装： 将IndexedDB的每个异步请求（如open, add, get等）封装成Promise。这样，你就可以使用async/await语法来编写看起来更像同步的代码，大大提高可读性和维护性。

    例如，一个简单的Promise封装openDB函数：

    function openDB(dbName, version) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, version);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            // 在这里处理对象仓库和索引的创建/升级
            if (!db.objectStoreNames.contains('myStore')) {
                db.createObjectStore('myStore', { keyPath: 'id' });
            }
            console.log(`数据库 ${dbName} 版本 ${version} 升级/初始化.`);
        };

        request.onsuccess = (event) => {
            resolve(event.target.result);
        };

        request.onerror = (event) => {
            reject(event.target.error);
        };
    });
}

// 使用 async/await
async function initAndUseDB() {
    try {
        const myDb = await openDB('myAppDB', 2);
        console.log("数据库已打开:", myDb);

        // 示例：添加数据
        const transaction = myDb.transaction(['myStore'], 'readwrite');
        const store = transaction.objectStore('myStore');
        const addRequest = store.add({ id: 'item1', value: 'Hello IndexedDB' });

        await new Promise((resolve, reject) => {
            addRequest.onsuccess = resolve;
            addRequest.onerror = reject;
        });
        console.log("数据添加成功！");

        // 示例：获取数据
        const getRequest = store.get('item1');
        const result = await new Promise((resolve, reject) => {
            getRequest.onsuccess = (e) => resolve(e.target.result);
            getRequest.onerror = reject;
        });
        console.log("获取到的数据:", result);

        // 事务完成后，db实例依然可用
        // myDb.close(); // 适当时候关闭数据库连接
    } catch (error) {
        console.error("操作失败:", error);
    }
}

initAndUseDB();

    这种方式虽然增加了初始的封装工作，但从长远来看，它让代码逻辑变得更加清晰，特别是当涉及到多个连续的数据库操作时。我发现，一旦有了这些Promise封装的基础函数，后续的业务逻辑开发会变得非常顺畅。

  2. 细致的错误处理： 每个IDBRequest对象都有onerror事件，每个IDBTransaction对象也有onerror事件。你需要在每个可能出错的地方都进行错误监听和处理。事务的错误通常会冒泡到事务本身，但单个请求的错误最好在请求级别处理。

    • 数据库打开错误：request.onerror
    • 事务错误：transaction.onerror
    • 单个操作请求错误：addRequest.onerror, getRequest.onerror等

    错误对象event.target.error通常会提供关于错误的详细信息，比如ConstraintError（主键冲突）、NotFoundError（未找到对象仓库）等。根据错误类型，你可以决定是重试、回滚、还是向用户显示友好的错误消息。

  3. 考虑浏览器兼容性： 虽然现代浏览器对IndexedDB的支持已经很好了，但在一些老旧或特定环境下，仍然可能遇到兼容性问题。通常会检查window.indexedDB是否存在。

    if (!window.indexedDB) {
    console.warn("当前浏览器不支持IndexedDB。");
    // 提供备用方案，例如使用LocalStorage或提示用户升级浏览器
}

    我通常会把这个检查放在应用启动的早期，避免后续不必要的错误。

IndexedDB中的事务管理有何重要性？

事务是IndexedDB的灵魂，也是它区别于LocalStorage等简单存储机制的核心优势。理解事务的重要性，就好比理解银行转账为什么需要确保“要么转账成功，要么账户余额不变”一样，它关乎数据的完整性和一致性。

  1. 原子性（Atomicity）： 一个事务中的所有操作被视为一个不可分割的单元。这意味着，事务中的所有操作要么全部成功并提交（commit），要么全部失败并回滚（rollback）。不会出现部分操作成功、部分操作失败的情况。比如，你有一个操作既要删除一条旧数据，又要插入一条新数据，如果这两个操作在一个事务中，即使插入新数据时因为某些原因失败了，旧数据也不会被删除，保证了数据不会处于一个中间的、不确定的状态。

  2. 一致性（Consistency）： 事务的执行会使数据库从一个一致状态转换到另一个一致状态。在事务开始时，数据库处于一个有效状态；在事务结束时，无论提交还是回滚，数据库都会回到一个有效状态。这防止了无效数据或不完整的数据被写入数据库。

  3. 隔离性（Isolation）： 并发执行的多个事务之间是相互隔离的，一个事务的中间状态不会被其他事务看到。这意味着，即使有多个操作同时尝试修改相同的数据，它们也像是串行执行一样，避免了数据冲突和脏读。IndexedDB的事务是短期的，并且一旦启动就不能添加新的操作。这有助于简化隔离的实现。

  4. 持久性（Durability）： 一旦事务成功提交，它对数据库的修改就是永久性的，即使系统崩溃或浏览器关闭，数据也不会丢失。这是IndexedDB作为持久化存储的关键特性。

为什么必须使用事务？

想象一下，你正在构建一个离线笔记应用。用户编辑了一篇笔记，你需要：

  • 更新笔记内容。
  • 更新笔记的最后修改时间。
  • 如果笔记有标签变化，可能还需要更新标签列表。

如果这些操作不放在一个事务里，万一在更新笔记内容后，更新修改时间的操作失败了，你的数据就处于一个不一致的状态：内容是新的，但修改时间却是旧的。这显然是不可接受的。

将这些操作封装在一个readwrite模式的事务中，可以确保它们要么全部成功，要么全部失败。如果中途有任何一个操作失败，整个事务都会回滚，数据库回到事务开始前的状态，避免了数据损坏或不一致。

我通常会把一个业务逻辑单元内所有相关的数据库操作都放在同一个事务中，这样能最大限度地保证数据的完整性。虽然这意味着你可能需要频繁地创建事务，但这是IndexedDB设计哲学的一部分，也是其强大之处。

IndexedDB与LocalStorage、SessionStorage、Web SQL等存储方式有何区别，何时选用IndexedDB？

在前端的持久化存储领域，我们有很多选择，每种都有其适用场景和局限性。理解它们之间的差异，能帮助我们做出更明智的技术选型。

  1. LocalStorage 和 SessionStorage：

    • 特点：它们是键值对存储，API极其简单，直接通过setItem(key, value)和getItem(key)操作。
    • 容量：通常限制在5MB-10MB左右。
    • 数据类型：只能存储字符串。如果你要存储对象，需要先用JSON.stringify()序列化，读取后再用JSON.parse()反序列化。
    • 持久性：LocalStorage数据永久保存，除非用户手动清除；SessionStorage数据仅在当前会话（浏览器标签页）有效，关闭标签页即清除。
    • 异步性：同步API，会阻塞主线程。
    • 事务：不支持事务。
    • 何时选用：适合存储少量、非结构化的数据，如用户偏好设置、简单的会话状态、少量缓存数据等。例如，记住用户的暗色模式选择，或者保存一个简单的购物车商品数量。

  2. Cookie：

    • 特点：由服务器设置并发送到浏览器，每次HTTP请求都会自动携带回服务器。
    • 容量：非常小，通常限制在4KB左右。
    • 持久性：可设置过期时间，过期后自动删除。
    • 异步性：通过HTTP请求传输，JS操作时同步。
    • 事务：不支持。
    • 何时选用：主要用于会话管理（如用户登录状态的Session ID）、个性化设置、跟踪用户行为等。由于其容量小且每次请求都会发送，不适合存储大量数据。

  3. Web SQL Database (已废弃)：

    • 特点：基于SQLite，通过JavaScript模拟SQL语法操作关系型数据库。
    • 容量：理论上较大，但实际受限。
    • 持久性：持久保存。
    • 异步性：异步API。
    • 事务：支持SQL事务。
    • 何时选用：不建议使用。它是一个已被W3C废弃的标准，浏览器支持度不统一，且没有后续发展。IndexedDB是其官方替代品。

  4. IndexedDB：

    • 特点：非关系型（NoSQL）数据库，存储键值对，值可以是复杂的JavaScript对象。
    • 容量：理论上非常大，通常是硬盘空间的50%或更多，具体取决于浏览器和用户设置，远超LocalStorage。
    • 数据类型：可以存储结构化数据（对象、数组、二进制数据如ArrayBuffer、Blob等）。
    • 持久性：持久保存，除非用户手动清除或浏览器策略清除（如存储空间不足）。
    • 异步性：所有操作都是异步的，基于事件回调或Promise。
    • 事务：完整支持事务，保证数据完整性和一致性。
    • 查询能力：支持索引，可以进行高效的范围查询和游标遍历。
    • 何时选用：
      • 需要存储大量结构化数据时：例如离线应用的数据、大型缓存、用户生成内容的本地副本。
      • 需要复杂查询和索引时：当你需要根据某个字段（而非主键）来查找数据，或者需要遍历大量数据时。
      • 需要保证数据完整性时：多个相关操作必须作为一个原子单元执行时。
      • 需要离线访问和高性能数据操作时：构建PWA（Progressive Web App）时，IndexedDB是核心组件之一。

总结来说，如果你只是想存个用户名或者少量配置，LocalStorage就够了。但如果你在构建一个功能复杂的离线应用，或者需要处理大量数据，并且对数据结构、查询效率和数据完整性有要求，那么IndexedDB几乎是唯一的、也是最好的选择。它虽然学习曲线比LocalStorage陡峭，但提供的能力是其他存储方式无法比拟的。

好了，本文到此结束，带大家了解了《JS操作IndexedDB基础教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>