<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>IndexDB</title>
</head>
<body>
</body>
<script>
let db = {};
// 打开数据库
const openDB = (dbName, version, storeName) => {
let indexedDB = window.indexedDB;
// 获取indexDB对象
const request = indexedDB.open(dbName, version)
// 数据库打开成功
request.onsuccess = function(event) {
// 数据库对象
db = event.target.result;
console.log('数据库打开成功');
}
// 数据库打开失败
request.onerror = function(event) {
console.log('数据库打开报错')
}
// 无数据库,进行数据库创建
request.onupgradeneeded = function(event) {
// 数据库创建或升级的时候会触发
console.log('数据库创建成功');
db = event.target.result;
// 创建数据表
let objectStore
if (!db.objectStoreNames.contains(storeName)) {
objectStore = db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true }) // 创建表
objectStore.createIndex('idIndex', 'name', { unique: false }) // 创建索引 可以让你搜索任意字段
}
}
}
// 添加数据
const addData = (db, storeName, data) => {
let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式("只读"或"读写")
.objectStore(storeName) // 仓库对象
.add(data)
request.onsuccess = function(event) {
console.log('数据写入成功')
}
request.onerror = function(event) {
console.log('数据写入失败')
throw new Error(event.target.error)
}
}
// 根据id获取数据
const getDataByKey = (db, storeName, key) => {
return new Promise((resolve, reject) => {
let transaction = db.transaction([storeName]) // 事务
let objectStore = transaction.objectStore(storeName) // 仓库对象
let request = objectStore.get(key)
request.onerror = function(event) {
console.log('事务失败')
reject(event)
}
request.onsuccess = function(event) {
console.log('主键查询结果: ', request.result)
resolve(request.result);
}
})
}
//按索引查询
const findByIndex = (db, storeName, key) => {
return new Promise((resolve, reject) => {
const transaction = db.transaction([storeName], "readonly");
const store = transaction.objectStore(storeName);
const index = store.index("idIndex");
const request = index.get(key);
request.onerror = function(event) {
console.log('事务失败')
reject(event)
}
request.onsuccess = function() {
const data = request.result;
resolve(data);
}
})
}
// 根据id修改数
const updateData = (db, storeName, data) => {
let request = db.transaction([storeName], 'readwrite') // 事务对象
.objectStore(storeName) // 仓库对象
.put(data)
request.onsuccess = function() {
console.log('数据更新成功')
}
request.onerror = function() {
console.log('数据更新失败')
}
}
// 根据id删除数据
const deleteData = (db, storeName, id) => {
let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)
request.onsuccess = function() {
console.log('数据删除成功')
}
request.onerror = function() {
console.log('数据删除失败')
}
}
// 打开数据库
let dbName = 'dbName', version = 2, storeName = 'biaoName'
openDB(dbName, version, storeName);
// 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错
setTimeout(() => {
console.log(db)
addData(db, storeName, {
id: (new Date).getTime(), // 必须且值唯一
name: '张三',
age: 18,
desc: 'helloWord'
})
getDataByKey(db, storeName, 1).then(res => {
console.log(res)
})
updateData(db, storeName, {id: 1663048566051, desc: '修改的内容', indexDB: '11111'})
// deleteData(db, storeName, 2)
findByIndex(db, storeName, '张三').then(res => {
console.log(res)
})
}, 1000)
</script>
</html>
indexDB使用记录
猜你喜欢
转载自blog.csdn.net/qq_23334071/article/details/126832564
今日推荐
周排行