使用文件将数据存储在本地数据库中的方法 (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可以让您方便并且高效地管理数据。
