js 如何操作IndexedDB 存储

IndexedDB 是一种在用户浏览器中存储大量结构化数据的方式。它是一个低级 API，用于在客户端存储大量数据，并使用索引来进行高性能搜索。以下是如何在前端 JavaScript 中使用 IndexedDB 的基本步骤：

1. 打开数据库

首先，你需要打开一个数据库。如果数据库不存在，它会自动创建。

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

request.onerror = function(event) {
  console.error('Database error:', event.target.errorCode);
};

request.onsuccess = function(event) {
  db = event.target.result;
  console.log('Database opened successfully');
};

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

2. 添加数据

你可以使用 transaction 和 objectStore 来添加数据。

function addData(data) {
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log('Data added successfully');
  };

  request.onerror = function(event) {
    console.error('Unable to add data', event.target.errorCode);
  };
}

// 示例数据
const newData = { id: 1, name: 'John Doe', email: 'john@example.com' };
addData(newData);

3. 读取数据

你可以通过键值来读取数据。

function readData(id) {
  const transaction = db.transaction(['myObjectStore']);
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.get(id);

  request.onerror = function(event) {
    console.error('Unable to retrieve data', event.target.errorCode);
  };

  request.onsuccess = function(event) {
    if (request.result) {
      console.log('Data retrieved successfully', request.result);
    } else {
      console.log('Data not found');
    }
  };
}

// 读取数据
readData(1);

4. 更新数据

你可以通过键值来更新数据。

function updateData(data) {
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.put(data);

  request.onsuccess = function(event) {
    console.log('Data updated successfully');
  };

  request.onerror = function(event) {
    console.error('Unable to update data', event.target.errorCode);
  };
}

// 更新数据
const updatedData = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };
updateData(updatedData);

5. 删除数据

你可以通过键值来删除数据。

function deleteData(id) {
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.delete(id);

  request.onsuccess = function(event) {
    console.log('Data deleted successfully');
  };

  request.onerror = function(event) {
    console.error('Unable to delete data', event.target.errorCode);
  };
}

// 删除数据
deleteData(1);

注意事项

• 事务：IndexedDB 操作需要在事务中进行。你可以指定事务的模式为 readonly、readwrite 或 versionchange。
• 异步操作：IndexedDB 的所有操作都是异步的，使用回调函数或 Promise 来处理操作结果。
• 错误处理：确保对所有可能发生的错误进行处理，例如数据库打开失败、数据添加失败等。

通过上述步骤，你可以在前端 JavaScript 中使用 IndexedDB 来存储和操作大量数据。IndexedDB 是一个强大的客户端存储解决方案，适用于需要存储大量数据并在客户端进行高效查询的应用场景。