登录
首页 >  文章 >  前端

HTML5IndexedDB使用教程与实例详解

时间：2026-02-20 14:59:48 227浏览 收藏

本文深入浅出地讲解了HTML5 IndexedDB这一强大而灵活的浏览器端NoSQL数据库，涵盖从数据库创建、对象仓库与索引定义，到增删改查、事务控制及游标遍历等核心操作，并配以清晰实用的代码示例；它特别适合需要离线运行、存储大量结构化数据（如用户信息、文件元数据）的现代Web应用，虽原生API偏底层且异步复杂，但配合localForage等封装库可大幅提升开发效率——掌握它，就等于握住了前端持久化存储的“高级钥匙”。

HTML5IndexedDB怎么使用_HTML5IndexedDB数据库的操作方法与实例

IndexedDB 是 HTML5 提供的一个浏览器端的 NoSQL 数据库，适合存储大量结构化数据，比如文件、图片的元信息，或者离线应用中的用户数据。它支持事务操作、索引查询，能在客户端持久化保存数据，不依赖网络。下面介绍它的基本使用方法和实际操作示例。

打开数据库并创建对象仓库

使用 IndexedDB 第一步是打开或创建一个数据库。如果数据库不存在，会自动创建。

<strong>let db;</strong>
const request = indexedDB.open("MyDatabase", 1); // 数据库名和版本号

request.onerror = function(event) {
  console.log("数据库打开失败");
};

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

// 只在数据库首次创建或版本更新时触发
request.onupgradeneeded = function(event) {
  db = event.target.result;

  // 创建一个对象仓库（类似表）
  if (!db.objectStoreNames.contains("users")) {
    const objectStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
    
    // 添加索引便于查询
    objectStore.createIndex("email", "email", { unique: true });
    objectStore.createIndex("name", "name", { unique: false });
  }
};

说明： onupgradeneeded 是定义数据结构的关键时机，只能在这里创建或删除对象仓库和索引。keyPath 指定主键字段，autoIncrement 表示主键自增。

添加数据（新增记录）

通过事务向对象仓库中插入数据。

function addUser(name, email) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");

  const user = { name, email };
  const request = store.add(user);

  request.onsuccess = function() {
    console.log("用户添加成功，ID:", request.result);
  };

  request.onerror = function() {
    console.log("添加失败，可能是邮箱重复");
  };
}

// 使用示例
addUser("张三", "zhangsan@example.com");

注意： 必须开启 readwrite 事务才能写入数据。若字段设置了 unique: true（如 email），重复值会触发错误。

读取与查询数据

支持按主键读取、按索引查询、遍历所有记录等操作。

  • 按主键读取：
function getUserById(id) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const request = store.get(id);

  request.onsuccess = function() {
    if (request.result) {
      console.log("找到用户:", request.result);
    } else {
      console.log("未找到该用户");
    }
  };
}
  • 按索引查询：
    • function getUserByEmail(email) {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const index = store.index("email");
  const request = index.get(email);

  request.onsuccess = function() {
    if (request.result) {
      console.log("通过邮箱找到用户:", request.result);
    }
  };
}
  • 遍历所有数据：
    • function listAllUsers() {
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");

  store.openCursor().onsuccess = function(event) {
    const cursor = event.target.result;
    if (cursor) {
      console.log("用户:", cursor.value);
      cursor.continue(); // 继续下一条
    } else {
      console.log("遍历完成");
    }
  };
}

    更新与删除数据

    修改或移除已有记录也很简单。

    • 更新数据：
    function updateUser(id, newName) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  const request = store.get(id);

  request.onsuccess = function() {
    const user = request.result;
    if (user) {
      user.name = newName;
      const updateRequest = store.put(user);
      updateRequest.onsuccess = () => console.log("更新成功");
    }
  };
}
  • 删除数据：
    • function deleteUser(id) {
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  const request = store.delete(id);

  request.onsuccess = function() {
    console.log("删除成功");
  };
}

    基本上就这些。掌握 open、add、get、put、delete 和游标遍历，就能应对大多数前端本地存储需求。IndexedDB 功能强大但 API 较底层，实际项目中可结合封装库如 localForage 简化操作。关键是理解事务机制和异步流程控制。

    今天关于《HTML5IndexedDB使用教程与实例详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

    资料下载
    相关阅读
    更多>
    最新阅读
    更多>
    课程推荐
    更多>