IndexedDB 或 Indexed Database 代表着一个低级别的 JavaScript API。它的功能涉及存储和检索大量的结构化数据——这包括文件和 Blob 对象。利用其处理客户端数据库的能力，IndexedDB 使 Web 应用程序能够在用户的设备上本地存储、查询和修改数据。此功能在构建面对大量数据的应用程序时特别有利；在没有互联网连接的情况下工作，支持离线操作，并通过本地数据缓存提供响应式的用户体验。
IndexedDB 的关键概念与特性
-
异步 API — IndexedDB 采用异步 API，基于事件驱动的编程模型，以防止主线程阻塞，并增强用户体验。
-
数据库 — IndexedDB 数据库作为容器，用于组织、检索和删除对象存储中的数据。
-
对象存储 — 对象存储类似于关系型数据库中的表，封装了 JavaScript 对象的集合，并提供了对 CRUD（创建、读取、更新、删除）操作的支持。
-
索引 — 对象存储中的索引能够提高数据查询的效率，它们可以根据特定字段改进搜索和排序性能。
-
事务 — IndexedDB 中的事务执行所有操作，保证了一致性和完整性，使得多个动作要么作为一个整体成功，要么全部失败。
为什么使用 IndexedDB？
在网络开发人员寻求高效的客户端存储解决方案时，他们发现 IndexedDB 是不可或缺的。它的异步特性确保了响应式的用户体验：避免了主线程阻塞；而且它通过维护数据完整性支持事务。IndexedDB 能够在本地管理大量的结构化数据；这种能力显著增强了离线功能，并减少了对持续服务器通信的需求。由于其灵活的关键结构、对优化查询的支持以及升级模式的能力，IndexedDB 成为了构建需要本地存储、离线支持以及最重要的是有效数据管理的 Web 应用程序的强大选择。
CRUD 操作
下面我们来看一下使用 IndexedDB 的 CRUD 操作代码示例。
创建/插入操作
为了向对象存储中插入新的记录，你在 IndexedDB 中使用 add() 方法。这个方法接受一个 JavaScript 对象或值作为参数，并随后将其纳入指定的对象存储中。但是，如果已经有具有相同键参数的条目存在，此操作将会失败，因此它非常适合用来保证唯一性。
const request = objectStore.add(data);
request.onsuccess = () => {
};
request.onerror = () => {
};
读取（检索）操作
get() 方法
使用 get() 方法：它根据你拥有的特定键来从对象存储中检索单一记录。
openCursor() 方法
初始化一个活动游标，遍历对象存储中的记录，openCursor() 方法通过允许处理每个单独条目来提高效率和控制力；这对于遍历对象存储中的所有条目非常有用。
const request = objectStore.openCursor();
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const data = cursor.value;
cursor.continue();
}
};
request.onerror = () => {
};
更新操作
put() 方法更新现有记录，或者当键不存在时添加新记录。其多功能性使其适用于数据操纵，特别是更新和插入。
const request = objectStore.put(data);
删除操作
为了根据其键从对象存储中移除特定记录，必须使用 delete() 方法；此方法为删除条目提供了直接的方法。
const request = objectStore.delete(key);
实现示例
以上 CRUD 操作的所有重要方法都在这段代码中实现。它将数据库数据呈现为一张表格，每条记录旁边都有删除和更新按钮。当你点击创建按钮时，它会在屏幕上显示一个表单元素供创建；从而允许输入名称和电子邮件到数据库中。默认情况下，此表单是隐藏的；只有在点击按钮时才会出现，并且在任务完成后随即消失。prompt() 方法填充更新表单的详细信息，这一功能为用户提供便利，因为警报也出现在同一位置。此外，相关的警报用于向用户发出成功事件或错误的信号。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
button {
padding: 8px;
margin: 5px;
}
#createForm, #updateForm {
display: none;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
width: auto;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>IndexedDB CRUD 操作</h2>
<button onclick="showCreateForm()">创建数据</button>
<div id="createForm" style="display: none;">
<h3>创建数据</h3>
<label for="name">姓名:</label>
<input type="text" id="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" required><br>
<button onclick="createData()">保存</button>
<button onclick="cancelCreate()">取消</button>
</div>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const dbName = "myDatabase";
let db;
const request = window.indexedDB.open(dbName, 11);
request.onerror = (event) => {
alert("数据库错误: " + event.target.errorCode);
};
request.onsuccess = (event) => {
db = event.target.result;
showData();
};
request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id", autoIncrement: true });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
};
function showData() {
const transaction = db.transaction(["myObjectStore"], "readonly");
const objectStore = transaction.objectStore("myObjectStore");
const tableBody = document.querySelector("#data-table tbody");
tableBody.innerHTML = "";
const request = objectStore.openCursor();
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const row = tableBody.insertRow();
row.insertCell(0).textContent = cursor.value.id;
row.insertCell(1).textContent = cursor.value.name;
row.insertCell(2).textContent = cursor.value.email;
const actionsCell = row.insertCell(3);
actionsCell.innerHTML = `
<button onclick="showUpdateForm(${cursor.value.id})">更新</button>
<button onclick="deleteData(${cursor.value.id})">删除</button>
`;
cursor.continue();
}
};
}
function createData() {
const transaction = db.transaction(["myObjectStore"], "readwrite");
const objectStore = transaction.objectStore("myObjectStore");
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const newData = {
name: name,
email: email
};
const request = objectStore.add(newData);
request.onsuccess = () => {
showData();
cancelCreate();
alert("数据添加成功")
};
request.onerror = () => {
alert("创建数据时出错。");
};
}
function showCreateForm() {
document.getElementById("createForm").style.display = "block";
}
function cancelCreate() {
document.getElementById("createForm").style.display = "none";
document.getElementById("name").value = "";
document.getElementById("email").value = "";
}
function showUpdateForm(id) {
const transaction = db.transaction(["myObjectStore"], "readwrite");
const objectStore = transaction.objectStore("myObjectStore");
const request = objectStore.get(id);
request.onsuccess = (event) => {
const data = event.target.result;
if (data) {
const name = prompt("更新姓名:", data.name);
const email = prompt("更新邮箱:", data.email);
if (name !== null && email !== null) {
data.name = name;
data.email = email;
const updateRequest = objectStore.put(data);
updateRequest.onsuccess = () => {
showData();
alert("更新了 " + data.name + " 的数据")
};
updateRequest.onerror = () => {
alert("更新数据时出错。");
};
}
}
};
}
function deleteData(id) {
const transaction = db.transaction(["myObjectStore"], "readwrite");
const objectStore = transaction.objectStore("myObjectStore");
const request = objectStore.delete(id);
request.onsuccess = () => {
showData();
alert("已删除 id " + id + " 的数据")
};
request.onerror = () => {
alert("删除数据时出错。");
};
}
</script>
</body>
</html>
尝试运行上述程序。在输出中，你会得到一个界面来创建、更新和删除数据。新建或更新的数据将在操作完成后立即以表格形式显示出来。