HTML5IndexedDB入门教程详解

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《HTML5 IndexedDB使用教程》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

IndexedDB是HTML5中用于浏览器内持久化存储大量结构化数据的低级API，支持事务操作，适用于需要离线功能的复杂应用。通过indexedDB.open()方法可创建或打开数据库，若数据库版本更新或首次创建会触发onupgradeneeded事件，在此可定义对象仓库（object store）和索引。例如创建“users”表并设置主键“id”，添加name和email索引。数据操作需在事务中进行：使用transaction()开启读写事务，调用add()插入数据，注意主键冲突；通过get()按主键查询，或利用索引index()实现条件查找；更新用put()覆盖原记录，删除用delete()移除指定主键数据；还可通过openCursor()遍历所有数据。所有操作均为异步，依赖事件回调处理结果，建议封装为Promise以提升代码可维护性。

HTML5中的IndexedDB是一种在用户浏览器中存储大量结构化数据的低级API，适合处理需要离线使用的复杂应用。它支持事务型操作，能高效地对数据进行增删改查。下面介绍如何使用IndexedDB进行基本的数据库操作。

创建或打开数据库

使用indexedDB.open()方法可以打开一个已有数据库，若不存在则会创建一个新的。

示例代码：

let request = indexedDB.open("MyDatabase", 1);
request.onerror = function(event) {
  console.log("无法打开数据库");
};
request.onsuccess = function(event) {
  db = event.target.result;
  console.log("数据库打开成功");
};

首次创建时，会触发onupgradeneeded事件，在该事件中定义数据表（object store）和索引。

例如：

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });
};

这里创建了一个名为“users”的对象仓库，主键为“id”，并添加了两个索引。

添加数据（新增记录）

插入数据需在事务中进行。先开启一个读写事务，再获取对象仓库，调用add()方法。

示例：

function addUser(db, user) {
  let transaction = db.transaction(["users"], "readwrite");
  let store = transaction.objectStore("users");
  let request = store.add(user);
  request.onsuccess = function() {
    console.log("用户添加成功");
  };
  request.onerror = function() {
    console.log("添加失败，可能主键冲突");
  };
}

调用方式：addUser(db, {id: 1, name: "张三", email: "zhang@example.com"})

读取数据（查询记录）

通过主键读取单条数据：

function getUserById(db, id) {
  let transaction = db.transaction(["users"]);
  let store = transaction.objectStore("users");
  let request = store.get(id);
  request.onsuccess = function() {
    if (request.result) {
      console.log("找到用户:", request.result);
    } else {
      console.log("未找到用户");
    }
  };
}

使用索引查询：

let index = store.index("name");
index.get("张三").onsuccess = function(event) {
  console.log("通过姓名查到:", event.target.result);
};

更新和删除数据

更新一条记录使用put()方法，会根据主键覆盖原有数据：

let transaction = db.transaction(["users"], "readwrite");
let store = transaction.objectStore("users");
store.put({id: 1, name: "李四", email: "li@example.com"});

删除数据使用delete()方法：

store.delete(1); // 删除主键为1的记录

也可通过游标遍历所有数据：

let cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log("遍历:", cursor.value);
    cursor.continue();
  }
};

基本上就这些。掌握这些基础操作后，就能在前端实现本地持久化存储。注意所有操作都是异步的，需通过事件回调处理结果。不复杂但容易忽略错误处理和事务边界。实际开发中建议封装成Promise风格更便于使用。

终于介绍完啦！小伙伴们，这篇关于《HTML5IndexedDB入门教程详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！