1、首先是打开或创建数据库
let db;
const request = window.indexedDB.open('myDatabase', 1); // 1 是版本号
// indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果
request.onerror = function(event) {
console.error('数据库打开失败:', event);
};
request.onsuccess = function(event) {
console.log('数据库打开成功');
db = request.result;
// 在这里可以开始使用数据库了
// 后续查询、追加、移除数据都可以在这操作
// addData(db, { id: 1, name: 'Alice', age: 30 });
// deleteData(db, 1);
// getData(db);
// getAllData(db);
// clearObjectStore(db);
// addMultipleData(db,[ { id: 1, name: 'Alice', age: 30 },{ id: 2, name: 'Blice', age: 31 },{ id: 3, name: 'Clice', age: 32 }])
// getDataByIndex(db);
// getMultipleDataByIndex(db, 30, 32);
};
// 只有第一次创建或者升级版本号的时候才会触发该函数
request.onupgradeneeded = function(event) {
const db = event.target.result;
// 创建对象存储区
// 创建一张叫做users的表格，主键是id
// 主键是默认建立索引的属性，后面可以通过主键查询数据
// 如果没有合适的主键，也可以让indexedDB自动生成主键
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
// 也可以创建索引
// IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（unique说明该属性是否包含重复的值）
objectStore.createIndex('name','name',{unique:false});
objectStore.createIndex('age','age',{unique:false});
};
2、添加数据
function addData(db){
// 添加数据需要先新建一个事务
// 新建事务时必须要指定表格名称和操作模式（只读/读写）
const transaction = db.transaction(['users'], 'readwrite');
// 拿到IDBObjectStore对象
const objectStore = transaction.objectStore('users');
const request = objectStore.add(data);
// 写入操作是异步操作
request.onsuccess = function (event) {
console.log('数据添加成功');
getData(db);
};
request.onerror = function (event) {
console.error('数据添加失败:', event);
};
}
3、添加多条数据，循环执行add
function addMultipleData(db, data) {
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
data.forEach(item => {
const request = objectStore.add(item);
request.onsuccess = function (event) {
console.log('数据添加成功');
};
request.onerror = function (event) {
console.error('数据添加失败:', event);
}
})
// 虽然每个 add 请求都有其自己的成功和错误处理函数，但事务本身也有 oncomplete 和 onerror 事件
// 另外只要一个失败，data数组里面的数据一个都添加不进去
// 并且会触发多次事务的 onerror 事件
// 这块还挺奇怪的？？？？
transaction.oncomplete = function (event) {
console.log('事务完成');
}
transaction.onerror = function (event) {
console.error('事务失败:', event);
}
}
4、按主键查询数据
function getData(db) {
// 读取数据也需要新建一个事务
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
// objectStore.get() 读取数据，参数是主键的值
const request = objectStore.get(3);
request.onsuccess = function (event) {
if (request.result) {
console.log('获取到的数据:', request.result);
} else {
console.log('没有找到数据');
}
};
request.onerror = function (event) {
console.error('获取数据失败:', event);
};
}
5、获取全部数据
function getAllData(db) {
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
// objectStore.openCursor 是 IndexedDB API 中的一个方法，用于创建一个游标（cursor），它可以遍历对象存储区（object store）中的所有记录。游标是一种迭代器，可以用来逐个访问对象存储区中的记录，并对这些记录执行操作，如读取、更新或删除等
const request = objectStore.openCursor();
request.onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
console.log(cursor.value);
document.getElementById("output").textContent += JSON.stringify(cursor.value) + "\n";
cursor.continue();
}
}
}
6、通过索引查找单条数据
function getDataByIndex(db) {
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
// name 是我们创建对象存储区的时候 创建的索引
const index = objectStore.index('name');
const request = index.get('Alice');
request.onsuccess = function (event) {
if (request.result) {
console.log('获取到的数据:', request.result);
} else {
console.log('没有找到数据');
}
}
}
7、通过索引查找区间数据
function getMultipleDataByIndex(db, minAge, maxAge) {
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const index = objectStore.index('age');
// IDBKeyRange.bound 是 IndexedDB API 中用于创建键范围的一个方法。它允许你指定一个键范围，以便在进行查询时只返回位于指定范围内的键值
// 接受两个必需参数和两个可选参数
// lower：范围的下限键值。
// upper：范围的上限键值。
// lowerOpen（可选，默认为false）：如果设置为true，则下限键值不包含在范围内。
// upperOpen（可选，默认为false）：如果设置为true，则上限键值不包含在范围内。
const range = IDBKeyRange.bound(minAge, maxAge, false, false);
const request = index.openCursor(range);
request.onsuccess = function (event) {
const cursor = event.target.result;
if (cursor) {
console.log('找到的数据:', cursor.value);
cursor.continue();
}
}
request.onerror = function (event) {
console.error('查找数据失败:', event);
};
}
8、清空对象存储区
function clearObjectStore(db) {
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const clearRequest = objectStore.clear();
clearRequest.onsuccess = function (event) {
console.log('对象存储区清空成功');
};
clearRequest.onerror = function (event) {
console.error('清空对象存储区失败:', event);
}
}
9、删除整个数据库
function clearDatabase(name) {
const request = indexedDB.deleteDatabase(name);
request.onsuccess = function (event) {
console.log('数据库删除成功');
};
request.onerror = function (event) {
console.error('删除数据库失败:', event);
};
request.onblocked = function (event) {
console.log('请求被阻塞，可能是因为旧的请求还在进行中');
};
}
10、删除某条数据
function deleteData(db, key) {
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const request = objectStore.delete(key);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
request.onerror = function (event) {
console.error('数据删除失败:', event);
}
}
