一. 什么是 IndexedDB?
IndexedDB（索引数据库）是一种由网页浏览器提供的 JavaScript 应用程序接口，用于管理 JSON 对象的 NoSQL 数据库。它是由万维网联盟（W3C）维护的标准。IndexedDB 是 localStorage 的替代方案，能够提供更多的存储容量，并能存储更多的数据。
二. 何时使用 IndexedDB?
IndexedDB 根据开发者的需求用于不同场景。通常情况下，它用于存储不经常更改的数据或元数据。例如，你可以将登录用户的数据存储在 IndexedDB 中，并在应用程序中根据需要使用它。另一个使用场景是存储登录用户的权限信息。
三. 创建 IndexedDB
下面是创建 IndexedDB 的步骤：
1. 编写 HTML 界面
首先，创建一个简单的 HTML 文件，该文件包含一个按钮，用于创建一个新的 IndexedDB。
html>
<html>
<body>
<button id="btnCreateStore" onclick="initDB()">初始化数据库button>
<p id="result">p>
<div id="UsersContainer" style="display: none;">
<button id="btnShowUsers" onclick="showUsers()">显示用户button>
<p>
<input type="text" id="txtName" placeholder="输入姓名">
<input type="text" id="txtEmail" placeholder="输入邮箱">
<input type="text" id="txtCountry" placeholder="输入国家">
<button type="button" onclick="addUser()">添加用户button>
p>
<div id="UsersTable">div>
div>
body>
html>
2. 初始化 IndexedDB
在点击 "初始化数据库" 按钮时，将调用 initDB() 函数来创建并初始化 IndexedDB。
var friends_Data = [
{ EmployeeName: "Jamil Moughal", EmployeeEmail: "jamil@gmail.com", Country: "巴基斯坦" },
{ EmployeeName: "Diviya", EmployeeEmail: "diviya@gmail.com", Country: "印度" },
{ EmployeeName: "Ali Khan", EmployeeEmail: "alikhan@gmail.com", Country: "埃及" },
{ EmployeeName: "John Charles", EmployeeEmail: "john@gmail.com", Country: "美国" },
{ EmployeeName: "Steve", EmployeeEmail: "steve@gmail.com", Country: "德国" },
];
function initDB() {
var Database_Name = "UsersDB"; // 定义数据库名称
var DB_Version = "1.0"; // 定义数据库版本
var dbObj;
var request = indexedDB.open(Database_Name, DB_Version); // 打开数据库
request.onsuccess = function (e) {
document.getElementById("result").innerHTML = "数据库已打开 :)"; // 数据库打开成功时显示提示
dbObj = request.result; // 获取数据库对象
document.getElementById('UsersContainer').style.display = 'block'; // 显示用户操作区域
};
request.onerror = function (e) {
console.log("Error:" + e.target.errorCode); // 如果出错，显示错误码
document.getElementById("result").innerHTML = "错误！数据库未能连接，请查看日志"; // 提示错误信息
};
request.onupgradeneeded = function (e) {
var objectStore = e.currentTarget.result.createObjectStore("MyObjectStore", { keyPath: "id", autoIncrement: true }); // 创建对象存储区
objectStore.createIndex("EmployeeName", "EmployeeName", { unique: false }); // 创建索引
objectStore.createIndex("EmployeeEmail", "EmployeeEmail", { unique: true }); // 邮箱索引唯一
objectStore.createIndex("Country", "Country", { unique: false });
for (i in friends_Data) {
objectStore.add(friends_Data[i]); // 添加初始数据
}
};
}
3. 显示 IndexedDB 数据
点击“显示用户”按钮时调用 showUsers() 函数来显示数据库中的用户。
function showUsers() {
var Database_Name = "UsersDB"; // 数据库名称
var DB_Version = "1.0"; // 数据库版本
var request = window.indexedDB.open(Database_Name, DB_Version); // 打开数据库
var db;
request.onsuccess = function (e) {
db = e.target.result;
var transaction = db.transaction("MyObjectStore", "readwrite"); // 创建事务
var objectStore = transaction.objectStore("MyObjectStore");
var add_request = objectStore.getAll(); // 获取所有记录
add_request.onsuccess = function (e) {
var list = e.target.result;
var _html = "";
if (list != undefined && list.length > 0) {
for (let index = 0; index < list.length; index++) {
_html += ""
;
_html += '姓名: ' + list[index].EmployeeName + '';
_html += '邮箱: ' + list[index].EmployeeEmail + '';
_html += '国家: ' + list[index].Country + '';
_html += ' + list[index].id + ')" style="background: red; color: white;">删除';
_html += '';
}
}
document.getElementById('UsersTable').innerHTML = _html; // 更新HTML内容
};
};
}
4. 添加新用户数据
用户可以通过在文本框中输入信息并点击“添加用户”按钮来添加数据。
function addUser() {
var Database_Name = "UsersDB";
var DB_Version = "1.0";
var request = window.indexedDB.open(Database_Name, DB_Version);
var db;
request.onsuccess = function (e) {
db = e.target.result;
var transaction = db.transaction("MyObjectStore", "readwrite");
var objectStore = transaction.objectStore("MyObjectStore");
var add_request = objectStore.add({
EmployeeName: document.getElementById("txtName").value, // 从输入框获取姓名
EmployeeEmail: document.getElementById("txtEmail").value, // 从输入框获取邮箱
Country: document.getElementById("txtCountry").value // 从输入框获取国家
});
add_request.onsuccess = function (e) {
// 当添加成功时的操作
};
};
}
5. 删除指定用户数据
通过用户的 id 来删除数据。
function deleteUser(Id) {
var Database_Name = "UsersDB";
var DB_Version = "1.0";
var request = window.indexedDB.open(Database_Name, DB_Version);
var db;
request.onsuccess = function (e) {
db = e.target.result;
var transaction = db.transaction("MyObjectStore", "readwrite");
var objectStore = transaction.objectStore("MyObjectStore");
var delete_request = objectStore.delete(Id); // 删除指定 id 的记录
delete_request.onsuccess = function (event) {
// 删除成功后的操作
};
};
}
四. 总结
本文详细介绍了如何创建 IndexedDB、如何存储数据、检索数据以及删除数据。通过这些步骤，您可以使用 IndexedDB 来管理更大且更复杂的数据集。