HTML - IndexedDB：浏览器中的个人数据库

你好，未来的网页开发者们！今天，我们将要深入 IndexedDB 的精彩世界。作为你友善的邻居计算机老师，我将引导你开始这段旅程，即使你之前从未编写过一行代码。那么，戴上你的虚拟安全帽，让我们开始建造吧！

HTML - IndexedDB

什么是 IndexedDB？

IndexedDB 就像是一个微型的数据库，它就在你的网页浏览器中。想象一下，在你的计算机里有一个小型的文件柜，可以存储和整理你网页应用所需的各种信息。酷不酷？

为什么使用 IndexedDB？

你可能想知道，“我们为什么需要另一种存储数据的方式？”让我给你讲一个小故事。在过去的岁月里，我们依赖 cookies 和本地存储在浏览器中保存数据。但它们就像试图把大象放进火柴盒里一样——有限且不够灵活。

以下是 IndexedDB 成为浏览器存储超级英雄的原因：

特性	描述
存储容量	可以存储比 cookies 或本地存储多得多的数据
数据类型	支持包括文件和 blob 在内的各种数据类型
索引	允许快速搜索你的数据
事务	通过基于事务的操作确保数据完整性
异步	在处理数据时不会冻结你的应用

开始使用 IndexedDB

让我们卷起袖子，开始写一些实际的代码。别担心，如果一开始看起来令人生畏——我们会一步一步分解。

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("数据库错误：" + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("数据库成功打开");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("对象存储已创建");
};

哇！这信息量有点大，对吧？让我们分解一下：

我们首先声明一个变量 db 来持有我们的数据库连接。
我们使用 indexedDB.open() 来打开（或创建）一个名为 "MyFirstDatabase" 的数据库。
我们设置了三个事件处理器：

onerror：如果出了问题，这个会运行。
onsuccess：当数据库成功打开时，这个会运行。
onupgradeneeded：当数据库被创建或升级时，这个会运行。

把 onupgradeneeded 想象成数据库的建筑师。这是我们设计数据库结构的地方。

向 IndexedDB 添加数据

现在我们已经设置了数据库，让我们向其中添加一些数据。想象我们在创建一个学生管理系统。

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("添加学生时出错：" + event.target.error);
};

request.onsuccess = function(event) {
console.log("学生添加成功");
};
}

// 用法
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

以下是正在发生的事情：

我们创建了一个事务——把它想象成我们数据的保护隧道。
我们获取对象存储（就像传统数据库中的表）。
我们使用 add() 方法来插入我们的学生数据。
我们设置成功和错误处理器来了解是否成功。

从 IndexedDB 检索数据

存储数据有什么用，如果我们不能检索它呢？让我们获取我们的学生数据：

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("获取学生时出错：" + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("找到学生：", request.result);
} else {
console.log("学生未找到");
}
};
}

// 用法
getStudent(1);

这个函数就像图书管理员为你取书：

我们开始一个只读事务（我们不会改变任何东西）。
我们使用 get() 方法按他们的 ID 检索学生。
如果我们找到了学生，我们就记录他们的细节；如果没有，我们就说他们没找到。

在 IndexedDB 中更新数据

学生会有进步，成绩会改变。让我们更新我们的记录：

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("获取学生更新数据时出错：" + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("更新学生时出错：" + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("学生更新成功");
};
};
}

// 用法
updateStudent(1, "A+");

这个函数就像老师更新成绩册：

我们获取学生当前的数据。
我们修改成绩。
我们使用 put() 方法将更新的数据保存回数据库。

从 IndexedDB 删除数据

有时，我们需要删除数据。让我们添加一个函数来删除学生：

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("删除学生时出错：" + event.target.error);
};

request.onsuccess = function(event) {
console.log("学生删除成功");
};
}

// 用法
deleteStudent(2);

这就像从我们的学生记录中擦除一个条目：

我们开始一个“读写”事务，因为我们在修改数据。
我们使用 delete() 方法按他们的 ID 删除学生。
我们处理成功和错误案例以了解是否成功。

结论

恭喜你！你已经迈出了进入 IndexedDB 世界的第一步。我们涵盖了创建数据库、添加、检索、更新和删除数据。这些是在使用 IndexedDB 时你会用到的基本操作。

记住，熟能生巧。尝试使用 IndexedDB 创建你自己的小项目。也许是一个待办事项应用或者个人日记。你越玩越熟练。

虽然 IndexedDB 起初可能看起来复杂，但它是一个强大的工具，可以让你网页应用的水平更上一层楼。它就像是一种超能力——在浏览器中存储和管理大量数据的能力。

继续编码，保持好奇心，别忘了在过程中享受乐趣！谁知道呢？下一个大型网页应用可能就在你的指尖。

Credits: Image by storyset