UniApp 使用 IndexedDB

UniApp 支持 IndexedDB。UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它允许你编写一次代码，然后发布到多个平台，包括 Web、iOS、Android、微信小程序等。

在 UniApp 中使用 IndexedDB 的方式与在普通的 Web 应用中使用 IndexedDB 的方式相同。你可以直接使用原生的 IndexedDB API，也可以使用第三方库如 Dexie.js 来简化操作。

以下是一个在 UniApp 中使用 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. 添加数据

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'], 'readonly');
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.get(id);

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

  request.onsuccess = function(event) {
    if (request.result) {
      console.log('Data retrieved:', request.result);
    } else {
      console.log('No data found with ID:', id);
    }
  };
}

// 查询 ID 为 1 的数据
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);
  };
}

// 更新 ID 为 1 的数据
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);
  };
}

// 删除 ID 为 1 的数据
deleteData(1);

这些示例展示了如何在 UniApp 中使用 IndexedDB 进行基本的增删改查操作。请注意，这些代码应该在支持 IndexedDB 的平台（如 Web）上运行。在 UniApp 中，这些代码可以在 H5+ 或 App（使用 WebView）平台上运行。