JavaScript轻松读写数据库，教你一招！ (js 读写数据库)
在Web应用程序中，使用数据库是必不可少的。数据库使得用户可以存储和检索数据。不仅如此，在许多情况下，数据库是Web应用程序的核心。对于开发人员而言，如何有效地读写数据库是一项非常重要的技能。
传统上，开发人员使用PHP、Java或Ruby等后端语言来读写数据库。但是，这些后端语言需要进行复杂的配置和安装，并且需要更多的服务器资源。而JavaScript则是一种简单和易于使用的语言，可以通过浏览器直接读写数据库。
浏览器自带的IndexedDB是一种非关系型数据库，它存储数据时使用Key-Value对。它与NoSQL数据库相似，但在功能方面更加简单。
接下来，我将向您展示如何使用JavaScript轻松读写IndexedDB数据库。
1. 打开数据库
使用以下代码在浏览器中打开一个名为”MyDatabase”的数据库：
“`
let request = indexedDB.open(‘MyDatabase’, 1);
“`
在这里， `1` 参数表示我们将首次创建数据库。
2. 声明对象存储区
在IndexedDB中，我们保存数据的地方称为对象存储区（Object Store）。我们需要为每个对象存储区定义一个结构，该结构指定数据对象的键和值。在以下代码中，我们声明了一个名为”MyObjectStore”的对象存储区：
“`
request.onupgradeneeded = event => {
let db = request.result;
let objectStore = db.createObjectStore(“MyObjectStore”, { keyPath: “id” });
};
“`
在这里， `id` 是我们将使用的键，用于标识每个值。
3. 添加数据
现在，我们可以向对象存储区添加数据。使用以下代码添加带有名称和年龄属性的对象：
“`
request.onsuccess = event => {
let db = request.result;
let transaction = db.transaction([“MyObjectStore”], “readwrite”);
let objectStore = transaction.objectStore(“MyObjectStore”);
let person = { id: 1, name: “John Doe”, age: 30 };
let request = objectStore.add(person);
request.onsuccess = () => {
console.log(“Data has been added to the database”);
};
request.onerror = () => {
console.log(“Error: Data has not been added to the database”);
};
};
“`
在这里，我们使用 `add()` 函数向对象存储区添加数据。当请求成功时，我们将打印“Data has been added to the database”。如果请求失败，我们将打印“Error: Data has not been added to the database”。
4. 读取数据
现在，我们可以从对象存储区读取数据。使用以下代码获取具有ID为1的人的数据：
“`
request.onsuccess = event => {
let db = request.result;
let transaction = db.transaction([“MyObjectStore”], “readonly”);
let objectStore = transaction.objectStore(“MyObjectStore”);
let request = objectStore.get(1);
request.onsuccess = () => {
console.log(request.result.name); // Output: John Doe
console.log(request.result.age); // Output: 30
};
};
“`
在这里，我们使用 `get()` 函数来从对象存储区获取具有特定键的对象。当请求成功时，我们将输出名称和年龄。
5. 更新数据
我们还可以更新对象存储区中的数据。通过以下代码更新ID为1的人的年龄：
“`
request.onsuccess = event => {
let db = request.result;
let transaction = db.transaction([“MyObjectStore”], “readwrite”);
let objectStore = transaction.objectStore(“MyObjectStore”);
let request = objectStore.get(1);
request.onsuccess = () => {
let person = request.result;
person.age = 35;
objectStore.put(person);
};
};
“`
在这里，我们首先使用 `get()` 方法获取ID为1的人的所有数据。然后，我们将更新年龄并使用 `put()` 函数将更新后的值保存回数据库中。
6. 删除数据
当然，我们还可以从对象存储区删除数据。通过以下代码删除具有ID为1的人的数据：
“`
request.onsuccess = event => {
let db = request.result;
let transaction = db.transaction([“MyObjectStore”], “readwrite”);
let objectStore = transaction.objectStore(“MyObjectStore”);
let request = objectStore.delete(1);
request.onsuccess = () => {
console.log(“Data has been deleted from the database”);
};
};
“`
在这里，我们使用 `delete()` 函数删除对象存储区中具有特定键的对象。当请求成功时，我们将打印“Data has been deleted from the database”。
在本文中，我们通过使用IndexedDB对象存储区，展示了JavaScript轻松读写数据库的方式。通过以上步骤，我们可以在浏览器中存储和检索数据，而无需使用任何后端语言。IndexedDB虽然与传统的关系型数据库不同，但它提供了一个轻量级的解决方案，适用于许多Web应用程序。
