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应用程序。

相关问题拓展阅读：

• 求js读取数据库数据显示在页面上的表中的功能源码

求js读取数据库数据显示在页面上的表中的功能源码

js 可以读数据库 // JavaScript Document

var ServerIP=”127.0.0.1″;var conn,framePath,Style;

function dukin_conn(){

var datasource=”数据库地址”;

var filePath= window.location.href;

framePath=filePath.split(“/frame”);

filePath=filePath.substring(8); //去掉

filePath=filePath.split(“/frame”);

datasource=filePath+”/db/”+datasource; try {

conn = new ActiveXObject(“ADODB.Connection”);

conn.Open(“Provider=microsoft.Jet.OLEDB.4.0;Data Source=”+datasource);

} catch (errer) {

alert(errer.description);

}

return true

}function conn_close(conn){

conn.close;

conn=null;

}function rs_close(rs){

rs.close;

rs=null;

}var request=req()

function req(){

var ocar=new Object;

ocar.mark=”读取地址栏地址”;

ocar.querystring=function showcolor(ret){

var s = window.location.search.substr(1);

var aryVars = s.split(‘&’);

for(var i=0;i

{

var aryPair = aryVars.split(“=”);