<!DOCTYPE html>
<html lang="en">
<button onclick="add()"> 新增数据</button>
<button onclick="read()"> 读取数据</button>
<button onclick="readAll()"> 读取所有数据</button>
<button onclick="update()"> 更新数据</button>
<button onclick="remove()"> 删除数据</button>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var db;
// 打开数据库
var request = window.indexedDB.open('testDB')
// 打开失败
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')) { // 判断person这张表格是否存在
objectStore = db.createObjectStore('person', { keyPath: 'id' }); // 不存在就新增一张叫做person的表格,主键是id
// 新建索引
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: false });
}
}
// 增
function add() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三1', age: 241, email: 'zhangsan@example.com1' });
request.onsuccess = function (event) {
console.log('数据写入成功');
};
request.onerror = function (event) {
console.log('数据写入失败');
}
}
// 查
function read() {
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1); // objectStore.get() 方法用于读取数据,参数是主键的值
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('没有更多数据了!');
}
};
}
// 改
function update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); // IDBObject.put()
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('数据删除成功');
};
}
</script>
</body>
</html>
indexedDB
最新推荐文章于 2025-01-04 09:55:27 发布