JavaScript数据库_IndexedDB操作_技术教程

IndexedDB是浏览器内置的NoSQL数据库，支持事务和索引，适用于存储大量结构化数据。首先通过indexedDB.open创建或打开数据库，并在onupgradeneeded事件中定义对象仓库和索引；成功后可在onsuccess中获取数据库实例。增删改查操作需通过事务进行：使用add()或put()添加数据，get()按主键读取，index()结合get()实现索引查询，getAll()遍历所有记录，put()更新数据，delete()删除记录。核心在于理解事务作用域与版本升级机制，虽API较复杂，但可通过Promise封装或使用idb等库简化操作。

IndexedDB 是浏览器内置的一个 NoSQL 数据库存储方案，适合在客户端存储大量结构化数据，比如文件、对象等。它支持事务处理、索引查询，适用于离线应用或需要高性能本地缓存的场景。虽然 API 看起来复杂，但掌握基本操作后使用起来并不难。

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

使用 IndexedDB 第一步是打开数据库连接。如果数据库不存在，会自动创建。通过 onupgradeneeded 事件来定义或更新数据结构（即对象仓库）。

示例代码：

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

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建一个对象仓库，keyPath 表示主键
  if (!db.objectStoreNames.contains('users')) {
    const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    // 添加索引便于按字段查询
    objectStore.createIndex('email', 'email', { unique: true });
    objectStore.createIndex('name', 'name');
  }
};

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

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

添加和读取数据

在获取到数据库实例后，可以通过事务进行增删改查操作。写入数据使用 add() 或 put() 方法。

示例：添加用户数据

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 = () => console.log('用户添加成功');
  request.onerror = () => console.error('添加失败:', request.error);
}

读取单条数据可通过主键：

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

也可以遍历所有数据：

function getAllUsers() {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const request = store.getAll();

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

更新与删除数据

更新数据使用 put()，传入已有主键的对象即可覆盖原记录。

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;
      store.put(user);
    }
  };
}

删除数据使用 delete()：

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

  request.onsuccess = () => console.log('用户已删除');
}