292 lines
11 KiB
JavaScript
292 lines
11 KiB
JavaScript
|
class IndexedDBHelper {
|
|||
|
|
constructor(dbName, version = 1) {
|
|||
|
|
this.dbName = dbName;
|
|||
|
|
this.version = version;
|
|||
|
|
this.db = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化数据库（打开/创建）
|
|||
|
|
* @param {Array} stores [{ name: "storeName", keyPath: "id", indexes: [{ name: "indexName", key: "keyPath", unique: false }] }]
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
openDB(stores = []) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const request = indexedDB.open(this.dbName, this.version);
|
|||
|
|
|
|||
|
|
request.onupgradeneeded = (event) => {
|
|||
|
|
this.db = event.target.result;
|
|||
|
|
stores.forEach(store => {
|
|||
|
|
if (!this.db.objectStoreNames.contains(store.name)) {
|
|||
|
|
const objectStore = this.db.createObjectStore(store.name, {
|
|||
|
|
keyPath: store.keyPath,
|
|||
|
|
autoIncrement: store.autoIncrement || false
|
|||
|
|
});
|
|||
|
|
if (store.indexes) {
|
|||
|
|
store.indexes.forEach(index => {
|
|||
|
|
objectStore.createIndex(index.name, index.key, {
|
|||
|
|
unique: index.unique
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
request.onsuccess = (event) => {
|
|||
|
|
this.db = event.target.result;
|
|||
|
|
console.log("✅ IndexedDB 连接成功");
|
|||
|
|
resolve(this.db);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
request.onerror = (event) => {
|
|||
|
|
reject(`IndexedDB Error: ${event.target.error}`);
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用查询方法，按指定字段查询
|
|||
|
|
async queryByField(storeName, fieldName, value) {
|
|||
|
|
return new Promise(async (resolve, reject) => {
|
|||
|
|
try {
|
|||
|
|
if (!this.db) {
|
|||
|
|
await this.openDB();
|
|||
|
|
}
|
|||
|
|
const transaction = this.db.transaction(storeName, 'readonly');
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
|
|||
|
|
if (!store.indexNames.contains(fieldName)) {
|
|||
|
|
return reject(`索引 ${fieldName} 不存在`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const index = store.index(fieldName);
|
|||
|
|
const request = index.getAll(value);
|
|||
|
|
|
|||
|
|
request.onsuccess = (event) => {
|
|||
|
|
resolve(event.target.result);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
request.onerror = (event) => {
|
|||
|
|
reject('查询失败: ' + event.target.error);
|
|||
|
|
};
|
|||
|
|
} catch (error) {
|
|||
|
|
reject('查询错误: ' + error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加数据（支持单条或批量）
|
|||
|
|
* @param {string} storeName - 存储空间名称
|
|||
|
|
* @param {Object|Array} data - 要添加的数据（单条对象或数组）
|
|||
|
|
* @returns {Promise<number|Array<number>>} - 返回添加数据的ID（单条返回数字，批量返回数组）
|
|||
|
|
*/
|
|||
|
|
add(storeName, data) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readwrite");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
|
|||
|
|
// 统一处理为数组格式
|
|||
|
|
const items = Array.isArray(data) ? data : [data];
|
|||
|
|
const results = [];
|
|||
|
|
|
|||
|
|
// 监听每个添加操作的成功事件
|
|||
|
|
items.forEach((item, index) => {
|
|||
|
|
const request = store.add(item);
|
|||
|
|
request.onsuccess = (event) => {
|
|||
|
|
results[index] = event.target.result; // 保存生成的ID
|
|||
|
|
};
|
|||
|
|
request.onerror = (event) => {
|
|||
|
|
transaction.abort(); // 遇到错误时中止事务
|
|||
|
|
reject(`第 ${index + 1} 条数据添加失败: ${event.target.error}`);
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听事务完成事件
|
|||
|
|
transaction.oncomplete = () => {
|
|||
|
|
// 单条数据返回单个ID，批量返回数组
|
|||
|
|
resolve(items.length === 1 ? results[0] : results);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 统一错误处理
|
|||
|
|
transaction.onerror = (event) => {
|
|||
|
|
reject(`添加失败: ${event.target.error}`);
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 读取数据（根据主键）
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @param {any} key
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
get(storeName, key) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readonly");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.get(key);
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve(request.result);
|
|||
|
|
request.onerror = (event) => reject(`Get Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 读取所有数据（兼容X5内核方案）
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
getAll(storeName) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readonly");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
|
|||
|
|
// 兼容性检测：优先尝试原生getAll方法
|
|||
|
|
if (typeof store.getAll === 'function') {
|
|||
|
|
const request = store.getAll();
|
|||
|
|
request.onsuccess = () => resolve(request.result);
|
|||
|
|
request.onerror = (e) => reject(`GetAll Error: ${e.target.error}`);
|
|||
|
|
}
|
|||
|
|
// 降级方案：使用游标手动遍历
|
|||
|
|
else {
|
|||
|
|
const results = [];
|
|||
|
|
const request = store.openCursor();
|
|||
|
|
|
|||
|
|
request.onsuccess = (e) => {
|
|||
|
|
const cursor = e.target.result;
|
|||
|
|
if (cursor) {
|
|||
|
|
results.push(cursor.value);
|
|||
|
|
cursor.continue();
|
|||
|
|
} else {
|
|||
|
|
resolve(results);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
request.onerror = (e) => reject(`Cursor Error: ${e.target.error}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取表的总记录数
|
|||
|
|
* @param {string} storeName - 表名（Object Store 名称）
|
|||
|
|
* @returns {Promise<number>} - 记录总数
|
|||
|
|
*/
|
|||
|
|
async getRecordCount(storeName) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readonly");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.count();
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve(request.result);
|
|||
|
|
request.onerror = (event) => reject(`❌ Count Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新数据
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @param {Object} data
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
update(storeName, data) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readwrite");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.put(data);
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve("Data updated successfully");
|
|||
|
|
request.onerror = (event) => reject(`Update Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除数据（根据主键）
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @param {any} key
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
delete(storeName, key) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readwrite");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.delete(key);
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve("Data deleted successfully");
|
|||
|
|
request.onerror = (event) => reject(`Delete Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 通过索引查询数据
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @param {string} indexName
|
|||
|
|
* @param {any} value
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
getByIndex(storeName, indexName, value) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readonly");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const index = store.index(indexName);
|
|||
|
|
const request = index.get(value);
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve(request.result);
|
|||
|
|
request.onerror = (event) => reject(`Get By Index Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清空表
|
|||
|
|
* @param {string} storeName
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
clearStore(storeName) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readwrite");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.clear();
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve("Store cleared successfully");
|
|||
|
|
request.onerror = (event) => reject(`Clear Store Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除数据库
|
|||
|
|
* @returns {Promise}
|
|||
|
|
*/
|
|||
|
|
deleteDB(dbNamed = null) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const request = indexedDB.deleteDatabase(dbNamed || this.dbName);
|
|||
|
|
|
|||
|
|
request.onsuccess = () => resolve("Database deleted successfully");
|
|||
|
|
request.onerror = (event) => reject(`Delete DB Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async deleteOldestRecord(storeName) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const transaction = this.db.transaction([storeName], "readwrite");
|
|||
|
|
const store = transaction.objectStore(storeName);
|
|||
|
|
const request = store.openCursor(); // 🔹 获取最早的记录（按主键 ID 排序）
|
|||
|
|
|
|||
|
|
request.onsuccess = function(event) {
|
|||
|
|
const cursor = event.target.result;
|
|||
|
|
if (cursor) {
|
|||
|
|
console.log(`🗑️ 删除最早的记录 ID: ${cursor.key}`);
|
|||
|
|
store.delete(cursor.key); // 🔥 删除最小 ID（最早记录）
|
|||
|
|
resolve();
|
|||
|
|
} else {
|
|||
|
|
resolve(); // 没有记录时跳过
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
request.onerror = (event) => reject(`❌ Cursor Error: ${event.target.error}`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default IndexedDBHelper
|