1.使用indexDB
a.打开数据库和创建数据库
var db;
var request = window.indexedDB.open('db', 1)
request.onerror = function (event) {
console.log('数据库打开报错');
};
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
};
//新建數據庫
request.onupgradeneeded = function (event) {
db = event.target.result;
var objectStore;
if (!db.objectStoreNames.contains('person')) {
objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
}
b.增删改查indexDB数据(方法名自己定义)
//新增数据
function add() {
console.log(db);
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '小李', age: 24, email: 'xiaoli@example.com' });
request.onsuccess = function (event) {
console.log('数据写入成功');
};
request.onerror = function (event) {
console.log('数据写入失败');
}
}
//刪除數據
function remove() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
}
//更新數據(修改)
function update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
request.onsuccess = function (event) {
console.log('数据更新成功');
};
request.onerror = function (event) {
console.log('数据更新失败');
}
}
//读取数据(查找)
function read() {
var request = db.transaction(['person']).objectStore('person').get(1);
request.onerror = function (event) {
console.log('事务失败');
};
request.onsuccess = function (event) {
if (request.result) {
console.log('Name: ' + request.result.name);
console.log('Age: ' + request.result.age);
console.log('Email: ' + request.result.email);
} else {
console.log('未获得数据记录');
}
};
}
//遍歷數據(查找)
function readAll() {
var objectStore = db.transaction('person').objectStore('person');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
console.log('Name: ' + cursor.value.name);
console.log('Age: ' + cursor.value.age);
console.log('Email: ' + cursor.value.email);
cursor.continue();
} else {
console.log('没有更多数据了!');
}
};
}
2.indexDB结合dexie.js使用
a.引入dexie.js
<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
b.创建数据库
var db = new Dexie("mydb");
db.version(1).stores({
person: "++id,name,age"
});
console.log(db);
c.增删改查(方法名自己定义)
//新增
function Add() {
db.person.add({name: '張三', age: 20 })
}
//删除
function Del() {
db.person.delete(2)
}
//修改
function Put() {
db.person.put({ id: 2, name: '李四', age: 20 })
}
//查找
function Get() {
db.person.get(1)
}
//条件查找
async function Where() {
await db.person.where('age').above(30).toArray()
}
d.关闭数据库
//關閉
function close() {
db.close()
}