什么是IndexedDB？有什么特点

最新推荐文章于 2025-03-26 23:38:53 发布

前端与小赵

最新推荐文章于 2025-03-26 23:38:53 发布

阅读量1.2k

点赞数 32

文章标签： spring java 后端

本文链接：https://blog.youkuaiyun.com/Zhao_0912/article/details/144267881

版权

IndexedDB 是一种在用户浏览器中存储大量结构化数据的低级API。它是一种事务性数据库系统，允许Web应用程序保存和检索复杂的数据类型，如文件或二进制大对象（BLOB）。与 localStorage 和 sessionStorage 不同，IndexedDB 提供了更强大的功能，适合需要频繁读写操作、处理复杂查询以及管理大量数据的应用场景。

特点

大规模数据存储：IndexedDB 支持存储大量的结构化数据，包括JSON对象、数组等，并且可以存储文件和二进制数据。
异步API：所有操作都是异步的，不会阻塞主线程，这有助于保持网页的响应性和流畅度。
索引支持：可以为对象存储中的记录创建索引，以提高查询效率。
事务机制：对数据库的操作是通过事务来进行的，确保了数据的一致性和完整性。
键值对存储：数据以键值对的形式存储，每个存储对象都有一个主键，可以通过这个主键快速查找记录。
跨窗口同步：多个浏览器标签页或窗口之间共享同一个IndexedDB实例，并且能够同步更新。

使用场景

离线存储：当用户处于离线状态时，IndexedDB 可以作为缓存来存储应用所需的数据，以便在没有网络连接的情况下仍能正常使用应用。
数据持久化：用于保存用户的设置、偏好或其他重要信息，这些数据可以在不同会话间持久存在。
复杂查询：由于支持索引和事务，IndexedDB 适合执行复杂的查询操作，如范围查询、排序等。
媒体文件存储：可以用来缓存音频、视频等多媒体资源，减少从服务器加载的时间。

基本概念

Database (数据库)：包含一组相关的对象存储空间。
Object Store (对象存储)：类似于关系型数据库中的表，用于存储具有相同模式的数据记录。
Key (键)：每个记录都有一个唯一的标识符，称为键，可以是自动生成的或由开发者指定。
Index (索引)：为了加速特定属性上的查询而创建的辅助数据结构。
Transaction (事务)：用于确保一系列数据库操作要么全部成功，要么全部失败，保证数据一致性。

API 方法

IndexedDB 的API相对较为复杂，主要包括以下几个方面：

打开数据库：使用 indexedDB.open() 方法来打开现有数据库或创建新数据库。
定义对象存储：在 onupgradeneeded 事件中定义新的对象存储或修改现有的对象存储。
添加/更新记录：使用 add() 或 put() 方法向对象存储中插入新记录或更新已有记录。
检索记录：使用 get() 方法根据键获取单个记录，或者使用游标遍历多个记录。
删除记录：使用 delete() 方法移除特定键对应的记录。
创建索引：使用 createIndex() 方法为对象存储中的某个属性创建索引，以加快查询速度。
事务管理：通过 transaction() 方法开始一个新的事务，指定要访问的对象存储及其访问模式（只读或读写）。

示例代码

// 打开或创建一个名为 "myDatabase" 的数据库，版本号为 1
let request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    
    // 如果对象存储不存在，则创建一个名为 "users" 的对象存储
    if (!db.objectStoreNames.contains("users")) {
        db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
    }
};

request.onsuccess = function(event) {
    let db = event.target.result;

    // 开始一个事务，访问 "users" 对象存储，权限为读写
    let transaction = db.transaction(["users"], "readwrite");
    let objectStore = transaction.objectStore("users");

    // 添加一条新记录
    objectStore.add({ name: "John Doe", age: 30 });

    // 查询所有记录并打印到控制台
    objectStore.openCursor().onsuccess = function(event) {
        let cursor = event.target.result;
        if (cursor) {
            console.log(cursor.value);
            cursor.continue();
        } else {
            console.log("No more entries!");
        }
    };

    // 关闭数据库连接
    db.close();
};

request.onerror = function(event) {
    console.error("Error opening database.");
};