HTML5 IndexedDB 本地数据库 - 完整指南

简介

IndexedDB 是 HTML5 引入的重要存储技术，它是一个面向对象的 NoSQL 数据库系统，能够在浏览器中存储大量结构化数据。与 LocalStorage 相比，IndexedDB 提供了更强大的数据存储和查询能力。

IndexedDB 的主要特点：

大容量存储 - 可以存储大量数据（通常几百MB甚至更多）
索引支持 - 支持创建索引来加速数据查询
事务支持 - 提供事务机制确保数据一致性
异步操作 - 所有操作都是异步的，不会阻塞主线程
复杂查询 - 支持范围查询、游标遍历等高级功能

打开数据库

使用 indexedDB.open() 方法打开或创建数据库：

打开数据库

var request = indexedDB.open("MyDatabase", 1);

// 数据库升级（首次打开或版本升级时）
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    console.log("数据库升级中...");
};

// 打开成功
request.onsuccess = function(event) {
    var db = event.target.result;
    console.log("数据库已打开");
};

// 打开失败
request.onerror = function(event) {
    console.error("打开失败: " + event.target.error);
};

创建对象仓库

对象仓库（Object Store）是 IndexedDB 中存储数据的基本单位，类似于关系数据库中的表：

创建对象仓库和索引

request.onupgradeneeded = function(event) {
    var db = event.target.result;
    
    // 创建对象仓库
    if (!db.objectStoreNames.contains("users")) {
        // keyPath: 主键字段
        var store = db.createObjectStore("users", { keyPath: "id", autoIncrement: false });
        
        // 创建索引（加速查询）
        store.createIndex("name", "name", { unique: false });
        store.createIndex("email", "email", { unique: true });
    }
};

数据操作 (CRUD)

添加数据

function addUser(db, user) {
    var transaction = db.transaction(["users"], "readwrite");
    var store = transaction.objectStore("users");
    var request = store.add(user);
    
    request.onsuccess = function() {
        console.log("添加成功");
    };
    
    request.onerror = function() {
        console.error("添加失败");
    };
}

// 使用
// addUser(db, {id: 1, name: "张三", email: "zhangsan@example.com"});

读取数据

function getUser(db, id) {
    var transaction = db.transaction(["users"], "readonly");
    var store = transaction.objectStore("users");
    var request = store.get(id);
    
    request.onsuccess = function() {
        var user = request.result;
        console.log("用户: ", user);
    };
}

更新数据

// 使用 put 方法更新数据（如果不存在则添加）
function updateUser(db, user) {
    var transaction = db.transaction(["users"], "readwrite");
    var store = transaction.objectStore("users");
    var request = store.put(user);
    
    request.onsuccess = function() {
        console.log("更新成功");
    };
}

删除数据

function deleteUser(db, id) {
    var transaction = db.transaction(["users"], "readwrite");
    var store = transaction.objectStore("users");
    var request = store.delete(id);
    
    request.onsuccess = function() {
        console.log("删除成功");
    };
}

注意事项

开发提示

IndexedDB 所有操作都是异步的，需要通过事件回调处理结果
每次数据库操作都需要创建事务
创建索引可以显著提高查询性能
数据库版本升级只在 onupgradeneeded 事件中处理
IndexedDB 有存储配额限制，具体取决于浏览器和设备