js
复制代码
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB Example</title>
</head>
<body>
<h1>IndexedDB Example</h1>
<!-- 创建数据库按钮 -->
<button onclick="initializeAndCreateDatabase()">Create Database</button>
<!-- 添加数据按钮 -->
<button onclick="addData()">Add Data</button>
<!-- 读取数据按钮 -->
<button onclick="readData()">Read Data</button>
<!-- 更新数据按钮 -->
<button onclick="updateData()">Update Data</button>
<!-- 删除数据按钮 -->
<button onclick="deleteData()">Delete Data</button>
<script>
let db
// 打开数据库或创建新数据库
function openDatabase () {
return new Promise((resolve, reject) => {
// 尝试打开名为 "MyDatabase" 版本号为 1 的数据库
const request = window.indexedDB.open("MyDatabase", 1)
request.onerror = function (event) {
reject(event.target.errorCode)
}
request.onsuccess = function (event) {
// 成功打开数据库
resolve(event.target.result)
}
request.onupgradeneeded = function (event) {
// 数据库需要升级时执行,创建对象存储空间和索引
const db = event.target.result
const objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id", autoIncrement: true })
// 创建一个名为 "name" 的索引,不要求唯一
objectStore.createIndex("name", "name", { unique: false })
resolve(db)
}
})
}
// 初始化并创建数据库
async function initializeAndCreateDatabase () {
// 异步打开数据库
db = await openDatabase()
console.log("Database opened successfully.")
}
// 添加数据
async function addData () {
if (!db) {
await initializeAndCreateDatabase()
}
const transaction = db.transaction(["MyObjectStore"], "readwrite")
const objectStore = transaction.objectStore("MyObjectStore")
const newData = { name: "John Doe" }
const request = objectStore.add(newData)
request.onsuccess = function (event) {
// 数据成功添加
console.log("Data added to the database.")
}
request.onerror = function (event) {
console.error("Error adding data: " + event.target.error)
}
}
// 读取数据
async function readData () {
if (!db) {
await initializeAndCreateDatabase()
}
const transaction = db.transaction(["MyObjectStore"], "readonly")
const objectStore = transaction.objectStore("MyObjectStore")
const request = objectStore.openCursor()
request.onsuccess = function (event) {
const cursor = event.target.result
if (cursor) {
console.log("ID: " + cursor.value.id + ", Name: " + cursor.value.name)
cursor.continue()
} else {
console.log("No more data.")
}
}
}
// 更新数据
async function updateData () {
if (!db) {
await initializeAndCreateDatabase()
}
const transaction = db.transaction(["MyObjectStore"], "readwrite")
const objectStore = transaction.objectStore("MyObjectStore")
const request = objectStore.put({ id: 1, name: "Updated Name" })
request.onsuccess = function (event) {
// 数据成功更新
console.log("Data updated.")
}
request.onerror = function (event) {
console.error("Error updating data: " + event.target.error)
}
}
// 删除数据
async function deleteData () {
if (!db) {
await initializeAndCreateDatabase()
}
const transaction = db.transaction(["MyObjectStore"], "readwrite")
const objectStore = transaction.objectStore("MyObjectStore")
const request = objectStore.delete(1)
request.onsuccess = function (event) {
// 数据成功删除
console.log("Data deleted.")
}
request.onerror = function (event) {
console.error("Error deleting data: " + event.target.error)
}
}
</script>
</body>
</html>