编写完整的代码,indexedDB数据库的使用,建立含有连接数据库,创建数据库,保存数据,读取数据,按钮的数据库,并能保存数据,读取数据
时间: 2024-05-10 14:18:18 浏览: 6
下面是一个使用indexedDB数据库的完整代码示例,包括连接数据库、创建数据库、保存数据、读取数据和按钮的数据库操作。
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>IndexedDB Demo</title>
</head>
<body>
<h1>IndexedDB Demo</h1>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label>
<input type="email" name="email" id="email" /><br />
<button type="submit" id="save">Save</button>
<button type="button" id="load">Load</button>
</form>
<div id="output"></div>
<script src="main.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
const dbName = "myDatabase";
const storeName = "users";
const request = indexedDB.open(dbName, 1);
let db;
request.onerror = function (event) {
console.error("Database error: ", event.target.errorCode);
};
request.onsuccess = function (event) {
db = event.target.result;
console.log("Database connection successful");
};
request.onupgradeneeded = function (event) {
const db = event.target.result;
const objectStore = db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
console.log("Database created");
};
function saveData(name, email) {
const transaction = db.transaction([storeName], "readwrite");
const objectStore = transaction.objectStore(storeName);
const data = { name, email };
const request = objectStore.add(data);
request.onerror = function (event) {
console.error("Data save error: ", event.target.errorCode);
};
request.onsuccess = function (event) {
console.log("Data saved: ", event.target.result);
};
}
function loadData() {
const transaction = db.transaction([storeName], "readonly");
const objectStore = transaction.objectStore(storeName);
const request = objectStore.getAll();
request.onerror = function (event) {
console.error("Data load error: ", event.target.errorCode);
};
request.onsuccess = function (event) {
const data = event.target.result;
console.log("Data loaded: ", data);
const output = document.getElementById("output");
output.innerHTML = "";
data.forEach((user) => {
const div = document.createElement("div");
div.innerHTML = `<strong>${user.name}</strong>: ${user.email}`;
output.appendChild(div);
});
};
}
document.getElementById("save").addEventListener("click", function (event) {
event.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
saveData(name, email);
});
document.getElementById("load").addEventListener("click", function (event) {
event.preventDefault();
loadData();
});
```
这个示例中,我们定义了一个常量 `dbName` 来表示数据库的名称,另一个常量 `storeName` 来表示存储数据的对象仓库的名称。然后,我们使用 `indexedDB.open()` 方法来打开数据库连接。如果数据库不存在,则会触发 `onupgradeneeded` 事件,我们在这个事件中创建数据库和对象仓库,并定义了两个索引。如果数据库连接成功,则会触发 `onsuccess` 事件,我们将数据库对象保存在变量 `db` 中。
我们还定义了两个函数 `saveData()` 和 `loadData()` 来分别保存数据和读取数据。在 `saveData()` 函数中,我们首先创建一个事务,然后获取对象仓库并向其中添加数据。在 `loadData()` 函数中,我们同样创建了一个事务,然后获取对象仓库并使用 `getAll()` 方法获取所有数据。
最后,我们使用 `addEventListener()` 方法为保存按钮和加载按钮添加事件监听器,分别调用 `saveData()` 和 `loadData()` 函数来执行保存和读取操作。在读取操作完成后,我们将数据显示在一个 `<div>` 元素中。