使用文件将数据存储在本地数据库中的方法 (js文件 本地数据库)

随着Web应用程序变得更加复杂,需要更多的数据存储和管理。在Web浏览器中,存储数据的一个好方法是使用本地存储。本地存储是浏览器提供的用于在客户端计算机上存储数据的API。其中更流行的本地存储解决方案之一是使用本地数据库。本文将指导您如何使用JavaScript文件将数据存储在本地数据库中。

1. 了解本地数据库

Web浏览器的本地存储是基于键值对存储的。说得更简单一些,本地存储是一个JavaScript对象,其中包含一组键值对。每个键都是一个字符串,值则可以是字符串或数字等各种数据类型。通过一个对象,您可以将数据存储在本地存储中,并且可以使用键访问该数据。但是,当数据量大时,使用对象进行管理变得非常困难。在这种情况下,建议使用本地数据库进行存储和管理。

2. 使用IndexedDB

IndexedDB是Web浏览器提供的客户端本地数据库。它是一个键值存储、面向文档的数据库,用于存储结构化数据。IndexedDB是异步的,意味着它可以存储大量数据,而不会对浏览器的性能造成影响。它可以使用JavaScript编写和管理。

3. 编写OpenDB和CreateStore函数

要使用IndexedDB,您需要编写一些JavaScript函数。我们来编写一个OpenDB函数。此函数将使用指定的数据库名称创建一个新的IndexedDB数据库。如果该数据库已经存在,则打开它:

“`

function openDB(dbName, dbVersion) {

var dbRequest = indexedDB.open(dbName, dbVersion);

dbRequest.onerror = function() {

console.log(“Fled to open the database”);

}

dbRequest.onsuccess = function() {

console.log(“Opened database successfully”);

}

dbRequest.onupgradeneeded = function(event) {

var db = event.target.result;

var objectStore = db.createObjectStore(“store”, {keyPath: “id”});

console.log(“Database upgrade complete”);

}

}

“`

在上述代码中,我们定义了一个函数openDB,该函数需要两个参数:数据库名称和数据库版本号。如果不存在该名称的数据库,则将创建它。dbRequest.onsuccess事件处理程序将在打开或创建数据库后运行。dbRequest对象有一个onupgradeneeded事件处理程序,它可以创建一个新的表和索引(如果需要)。

接下来,我们可以编写一个CreateStore函数来添加数据到该数据库的存储对象:

“`

function createStore(dbName, dbVersion, storeName, data) {

var dbRequest = indexedDB.open(dbName, dbVersion);

dbRequest.onerror = function() {

console.log(“Fled to create the store”);

}

dbRequest.onsuccess = function() {

var db = dbRequest.result;

var transaction = db.transaction([storeName], “readwrite”);

var objectStore = transaction.objectStore(storeName);

data.forEach(function(item) {

objectStore.add(item);

});

transaction.oncomplete = function() {

console.log(“Data added to store successfully”);

}

}

}

“`

在上述代码中,我们定义了一个函数CreateStore,该函数需要四个参数:数据库名称,数据库版本号,存储对象名称以及要添加的数据数组。该函数使用前面的OpenDB函数来打开数据库,并使用事务将数据添加到存储对象中。transaction.oncomplete事件处理程序将在事务完成时执行。

4. 将数据添加到IndexedDB

使用CreateStore函数,可以将数据添加到IndexedDB中。以下是一个例子:

“`

var data = [

{id: 1, name: “Tom”},

{id: 2, name: “Jerry”},

{id: 3, name: “Spike”}

];

createStore(“example”, 1, “store”, data);

“`

在上述代码中,我们创建了一个包含三个条目的对象数组data,并将其作为参数传递给CreateStore函数。此函数将数据存储在数据库名称为“example”,版本1,存储对象名称为“store”的对象中。您可以使用类似的方式向数据库添加任意数量的数据。

5. 从IndexedDB检索数据

要从IndexedDB中检索数据,需要编写一个DataReader函数,该函数将打开存储对象并检索其中的数据。

“`

function readData(dbName, dbVersion, storeName, callback) {

var dbRequest = indexedDB.open(dbName, dbVersion);

dbRequest.onerror = function() {

console.log(“Fled to open the database for reading”);

}

dbRequest.onsuccess = function() {

var db = dbRequest.result;

var transaction = db.transaction([storeName], “readonly”);

var objectStore = transaction.objectStore(storeName);

var data = [];

objectStore.openCursor().onsuccess = function(event) {

var cursor = event.target.result;

if (cursor) {

data.push(cursor.value);

cursor.continue();

}

else {

callback(data);

}

};

}

}

“`

以上函数readData需要三个参数:数据库名称、数据库版本号以及存储对象名称。回调函数将在检索数据完毕后执行。读取流程包括打开数据库、打开存储对象、使用openCursor函数检索数据并将其存储在数组中,最后使用回调函数返回数据。

6. 使用IndexedDB管理数据

使用以上步骤,我们可以将数据存储在IndexedDB中,以及从该数据库检索数据。除此之外,您还可以使用IndexedDB删除数据、更新数据甚至整个存储对象。以下是一个例子:

“`

function deleteData(dbName, dbVersion, storeName, id) {

var dbRequest = indexedDB.open(dbName, dbVersion);

dbRequest.onerror = function() {

console.log(“Fled to delete the item from store”);

}

dbRequest.onsuccess = function() {

var db = dbRequest.result;

var transaction = db.transaction([storeName], “readwrite”);

var objectStore = transaction.objectStore(storeName);

objectStore.delete(id);

transaction.oncomplete = function() {

console.log(“Item has been deleted from store”);

}

}

}

“`

在以上函数deleteData中,我们通过ID删除数据。可以使用类似的操作实现数据更新或批量删除操作。

如果您正在开发一个需要存储大量数据的Web应用程序,则使用IndexedDB是一种不错的选择。结合JavaScript,使用IndexedDB可以让您方便并且高效地管理数据。

相关问题拓展阅读:

html里怎么用javascript连接数据库

理论上是不要这么做的 javascript代码会暴露给客户端 你的数据库地址 帐号 密码都会暴露

建议采取用动态语言读取数据库 比如 asp php jsp asp.net等都可以

然后用javascript 去提交参数给动态页面,也就是所谓的ajax的方式.

理论上不建议这样连,但是也可以连的

代码如下:

<!–

function getCountFromDB() {

//以当前页面文件为基础,找到文件所在的绝对路径。

var filePath = location.href.substring(0, location.href.indexOf(“index.html”));

var path = filePath + “MyData.mdb”;

//去掉字符串中最前面的”

path = path.substring(8);

var updateCnt = 0;

//生成查询和更新用的sql语句。

var sqlSelCnt = “SELECT * FROM “;

//建立连接,并生成相关字符串。

var con = new ActiveXObject(“ADODB.Connection”);

con.Provider = “Microsoft.Jet.OLEDB.4.0”;

con.ConnectionString = “Data Source=” + path;

con.open;

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

rs.open (sqlSelCnt,con);

while (!rs.eof) {

var cnt = rs.Fields(“content”);

document.write (cnt);

rs.moveNext;

}

rs.close();

rs = null;

}

来源地址:使用文件将数据存储在本地数据库中的方法 (js文件 本地数据库)

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:www.88531.cn资享网,谢谢!^^

© 版权声明
THE END
喜欢就支持一下吧
点赞41 分享