HTML5 indexedDB前端本地存储数据库

实力
82 阅读3分钟

当需要在前端进行本地存储时，HTML5提供了一个强大的数据库API，即indexedDB。indexedDB允许你创建、读取、更新和删除数据，并且支持复杂的查询操作。

步骤1：打开数据库 首先，我们需要在JavaScript中打开一个indexedDB数据库。如果数据库不存在，则会自动创建它。

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

request.onerror = function(event) {
  console.log('数据库打开错误');
};

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

  // 在这里可以执行后续操作，如读取或写入数据
};

在上述代码中，我们使用indexedDB.open()方法来打开名为"myDatabase"的数据库。如果数据库已经存在，则直接打开它；否则，将会创建一个新的数据库。如果打开数据库成功，我们可以通过event.target.result获取到数据库对象。

步骤2：创建对象存储空间 在indexedDB中，数据通过对象存储空间（object store）进行存储。我们需要创建一个对象存储空间来保存数据。

request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建一个名为"myObjectStore"的对象存储空间，设置主键为"id"
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

  console.log('对象存储空间创建成功');
};

在上述代码中，我们使用onupgradeneeded事件来处理数据库的升级操作。在该事件的回调函数中，我们通过db.createObjectStore()方法创建一个名为"myObjectStore"的对象存储空间，并将"id"字段作为主键。

步骤3：添加数据到对象存储空间 现在我们可以向创建的对象存储空间中添加数据了。

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

  const data = { id: 1, name: 'John Doe', age: 30 };

  const request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log('数据添加成功');
  };

  request.onerror = function(event) {
    console.log('数据添加失败');
  };
}

addData();

在上述代码中，我们首先创建一个事务（transaction），并指定要操作的对象存储空间。然后，我们使用objectStore.add()方法将数据添加到对象存储空间中。

步骤4：读取数据 读取数据是indexedDB中的常见操作之一。

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

  const request = objectStore.get(1);

  request.onsuccess = function(event) {
    const data = event.target.result;
    console.log('读取到的数据：', data);
  };

  request.onerror = function(event) {
    console.log('数据读取失败');
  };
}

readData();

在上述代码中，我们创建一个只读事务，并通过objectStore.get()方法根据主键获取特定的数据。

步骤5：更新数据 如果需要更新已经存储的数据，我们可以使用objectStore.put()方法。

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

  const data = { id: 1, name: 'Jane Doe', age: 35 };

  const request = objectStore.put(data);

  request.onsuccess = function(event) {
    console.log('数据更新成功');
  };

  request.onerror = function(event) {
    console.log('数据更新失败');
  };
}

updateData();

在上述代码中，我们首先创建一个读写事务，并使用objectStore.put()方法将新的数据替换掉指定主键的旧数据。

步骤6：删除数据 如果需要从对象存储空间中删除数据，我们可以使用objectStore.delete()方法。

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

  const request = objectStore.delete(1);

  request.onsuccess = function(event) {
    console.log('数据删除成功');
  };

  request.onerror = function(event) {
    console.log('数据删除失败');
  };
}

deleteData();

在上述代码中，我们创建了一个读写事务，并使用objectStore.delete()方法根据主键删除了特定的数据。

avatar
文章
阅读
粉丝