首页 > 文章 > 前端

HTML5IndexedDB操作全教程

时间：2025-10-27 10:40:52 154浏览收藏

掌握HTML5 IndexedDB，轻松实现浏览器端数据持久化！本文为你提供一份全面的IndexedDB增删改查攻略，助你快速上手这款强大的客户端存储API。IndexedDB作为HTML5的重要组成部分，允许开发者在浏览器中存储大量结构化数据，包括文本、图片、文件等，特别适合离线应用和大数据处理。本文将详细讲解如何打开数据库、创建对象仓库（类似数据库表），并通过事务实现数据的添加、查询、更新和删除操作。无论你是前端开发新手还是经验丰富的工程师，都能通过本文轻松掌握IndexedDB的核心用法，为你的Web应用添加强大的离线数据存储能力。

IndexedDB通过增删改查操作实现浏览器端大量结构化数据存储。首先打开数据库并创建对象仓库；接着使用事务添加数据；然后可按主键查询或遍历所有数据；支持获取记录后更新字段；还能根据主键删除指定数据，适用于离线应用与大数据处理场景。

HTML5代码如何管理客户端存储 HTML5代码中IndexedDB的增删改查

HTML5 提供了多种客户端存储方式，其中 IndexedDB 是一种强大且灵活的低级 API，用于在用户浏览器中存储大量结构化数据，包括二进制数据（如图片、文件等）。它适合需要离线功能或处理大量数据的 Web 应用。下面介绍如何使用 IndexedDB 实现增删改查操作。

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

在使用 IndexedDB 之前，必须先打开数据库并定义一个对象仓库（类似表）来存储数据。

const request = indexedDB.open('MyDatabase', 1);
let db;

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建名为 users 的对象仓库，主键为 id
  if (!db.objectStoreNames.contains('users')) {
    db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
  }
};

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

request.onerror = function(event) {
  console.error('数据库打开失败:', event.target.error);
};

2. 添加数据（增）

使用事务将新记录插入到对象仓库中。

function addUser(name, email) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const user = { name, email }; // id 会自动递增

  const addRequest = store.add(user);

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

  addRequest.onerror = function() {
    console.error('添加失败:', addRequest.error);
  };
}

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

3. 查询数据（查）

支持按主键查询单条数据，或遍历所有数据。

// 按 ID 查询单个用户
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('未找到 ID 为', id, '的用户');
    }
  };
}

// 查询所有用户
function getAllUsers() {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const request = store.getAll();

  request.onsuccess = function() {
    console.log('所有用户:', request.result);
  };
}

// 使用示例
getUserById(1);
getAllUsers();

4. 更新数据（改）

通过主键找到记录并更新其内容。

function updateUser(id, name, email) {
  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 = name;
      user.email = email;
      const updateReq = store.put(user); // 保存更新
      updateReq.onsuccess = () => console.log('更新成功');
    } else {
      console.log('用户不存在');
    }
  };
}

// 使用示例
updateUser(1, '李四', 'lisi@example.com');

5. 删除数据（删）

根据主键删除指定记录。

function deleteUser(id) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.delete(id);

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

  request.onerror = function() {
    console.error('删除失败:', request.error);
  };
}

// 使用示例
deleteUser(1);

基本上就这些。IndexedDB 虽然 API 较为复杂，但功能强大，适用于需要持久化存储和高性能查询的场景。掌握它的基本增删改查操作是开发离线 Web 应用的重要一步。

本篇关于《HTML5IndexedDB操作全教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

增删改查 IndexedDB 离线应用浏览器数据持久化对象仓库