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(“=”);

if (aryPair==ret){return aryPair;i=aryVars+1;}

}

}

return ocar;

} var S=request.querystring(“S”);

if (S==null){window.location.href=”../index.html”;}

dukin_conn();

//连接数据库

var sc = new ActiveXObject(“ADODB.Recordset”);

var sql=”select * from where =”+S;

sc.open(sql, conn, 1,1 );

if (sc.recordcount

var newsid=””+sc(“id”)+””; //以前用网站转CD时作的一个东东.核心部分就是这个,需要的话我可以把我作的东西发给你.不过没有作完 hehe

利用AJAX+XML可以实现此类效果。

关于js 读写数据库的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《JavaScript轻松读写数据库,教你一招! (js 读写数据库)》
文章链接:https://zhuji.vsping.com/139112.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。