首页 > 文章 > 前端

IndexedDB客户端操作全解析

时间：2025-12-09 11:37:48 319浏览收藏

推广推荐

支持 PC / 移动端，安全直达

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript IndexedDB 客户端操作详解》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

IndexedDB是浏览器本地数据库，支持索引、事务和异步操作，适用于离线Web应用。通过open创建或打开数据库，onupgradeneeded中定义对象仓库和索引，如users表以id为主键并添加email唯一索引；数据增删改查均在事务中进行，add或put插入/更新记录，get根据主键读取，delete删除数据，还可通过index实现非主键字段高效查询，所有操作异步执行需监听success与error事件，从而实现前端复杂数据持久化。

JavaScriptIndexedDB_客户端数据库操作

IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据，尤其适用于需要离线工作的 Web 应用。相比 localStorage，它支持索引、事务和异步操作，能处理更复杂的数据场景。

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

使用 IndexedDB 第一步是打开或创建数据库。如果数据库不存在，会自动创建。同时可以定义版本号来管理结构变更。

示例代码：

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

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建对象仓库（类似表），指定主键
  if (!db.objectStoreNames.contains('users')) {
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    // 添加索引便于查询
    objectStore.createIndex('email', 'email', { unique: true });
  }
};

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

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

添加与读取数据

通过事务操作数据，确保一致性。写入和读取都需在事务中进行。

添加数据示例：

function addUser(user) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.add(user);

  request.onsuccess = () => console.log('用户添加成功');
  request.onerror = (e) => console.error('添加失败:', e.target.error);
}
// 调用
addUser({ id: 1, name: '张三', email: 'zhang@example.com' });

读取数据示例：

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 updateUser(user) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.put(user); // 若主键存在则更新，否则新增
}

删除数据：

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

查询带索引的数据

利用索引可高效查找非主键字段。

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 = () => {
    if (request.result) {
      console.log('通过邮箱找到用户:', request.result);
    }
  };
}

基本上就这些。掌握 open、add、get、put、delete 和索引查询，就能在前端实现较完整的数据持久化能力。注意所有操作都是异步的，合理处理 success 和 error 事件很关键。

今天关于《IndexedDB客户端操作全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

java 编程