Heim > Artikel > Web-Frontend > Stammdatenspeicherung und lokale Datenbanken in JavaScript
Stammdatenspeicherung und lokale Datenbanken in JavaScript
- WBOYOriginal
- 2023-11-04 11:59:11987Durchsuche
Um die Datenspeicherung und lokale Datenbanken in JavaScript zu beherrschen, sind spezifische Codebeispiele erforderlich.
In den letzten Jahren sind Datenspeicherung und -verwaltung mit der rasanten Entwicklung des Internets und der Beliebtheit intelligenter Geräte zu einem wichtigen technischen Thema geworden Bedürfnisse. In JavaScript gibt es sehr unterschiedliche Methoden zur Datenspeicherung, darunter gängige Cookies, Web Storage, IndexedDB usw. Das Verständnis und die Beherrschung dieser Datenspeichermethoden können uns dabei helfen, Anwendungen effizienter zu entwickeln und zu verwalten.
In früheren Artikeln haben wir Cookies und Webspeicher in JavaScript ausführlich vorgestellt. Dieser Artikel konzentriert sich auf die leistungsfähigere und komplexere lokale Datenbank – IndexedDB.
IndexedDB ist eine API zum Erstellen und Verwalten von Datenbanken im Browser, die eine sehr leistungsstarke und flexible Möglichkeit zum Speichern und Abrufen von Daten bietet. IndexedDB nutzt die Datenstruktur einer nicht relationalen Datenbank, in der Daten in Form von Schlüssel-Wert-Paaren gespeichert werden und die Indexerstellung und -abfrage unterstützt.
Im Folgenden zeigen wir anhand eines konkreten Codebeispiels, wie Sie mit IndexedDB eine Datenbank im Browser erstellen und Vorgänge zum Hinzufügen, Löschen, Ändern und Abfragen von Daten durchführen.
Zuerst müssen wir eine HTML-Seite erstellen und eine Schaltfläche zum Bedienen von IndexedDB und einen Container zum Anzeigen der Daten hinzufügen:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDB Demo</title> </head> <body> <button id="addButton">增加数据</button> <button id="deleteButton">删除数据</button> <button id="updateButton">更新数据</button> <button id="queryButton">查询数据</button> <div id="resultContainer"></div> <script src="main.js"></script> </body> </html>
Dann können wir in die JavaScript-Datei main.js einen Code schreiben, um eine IndexedDB-Datenbank zu erstellen und Führen Sie Vorgänge zum Hinzufügen, Löschen, Aktualisieren und Abfragen von Daten aus:
// 打开或创建一个名为MyDatabase的IndexedDB数据库
var request = indexedDB.open("MyDatabase", 1);
// 如果数据库不存在，则创建
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
};
// 数据库创建成功后的回调函数
request.onsuccess = function(event) {
var db = event.target.result;
// 增加数据
document.getElementById("addButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var user = { id: 1, name: "John Doe", age: 25 };
var request = objectStore.add(user);
request.onsuccess = function(event) {
console.log("Data added successfully");
};
request.onerror = function(event) {
console.log("Error adding data");
};
};
// 删除数据
document.getElementById("deleteButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var request = objectStore.delete(1);
request.onsuccess = function(event) {
console.log("Data deleted successfully");
};
request.onerror = function(event) {
console.log("Error deleting data");
};
};
// 更新数据
document.getElementById("updateButton").onclick = function() {
var transaction = db.transaction(["users"], "readwrite");
var objectStore = transaction.objectStore("users");
var request = objectStore.put({ id: 1, name: "Jane Doe", age: 30 });
request.onsuccess = function(event) {
console.log("Data updated successfully");
};
request.onerror = function(event) {
console.log("Error updating data");
};
};
// 查询数据
document.getElementById("queryButton").onclick = function() {
var transaction = db.transaction(["users"], "readonly");
var objectStore = transaction.objectStore("users");
var request = objectStore.get(1);
request.onsuccess = function(event) {
var user = event.target.result;
var resultContainer = document.getElementById("resultContainer");
resultContainer.innerHTML = "Name: " + user.name + ", Age: " + user.age;
};
request.onerror = function(event) {
console.log("Error querying data");
};
};
};
// 数据库创建失败后的回调函数
request.onerror = function(event) {
console.log("Error creating database");
};Mit dem obigen Code haben wir die Vorgänge zum Hinzufügen, Löschen, Aktualisieren und Abfragen von Daten implementiert. Wenn der Benutzer auf die Schaltfläche klickt, wird die entsprechende Aktion ausgelöst und ausgeführt.
Anhand dieses einfachen Beispiels können wir sehen, dass IndexedDB als lokale Datenbank eine breite Palette von Funktionen und flexiblen Operationen in JavaScript bietet. Wenn Sie IndexedDB beherrschen, können Sie nicht nur den Speicher- und Abfrageprozess großer Datenmengen optimieren, sondern auch die Reaktionsgeschwindigkeit und das Benutzererlebnis der Anwendung verbessern.
Zusammenfassend haben wir anhand spezifischer Codebeispiele gelernt, wie man IndexedDB für die Datenspeicherung und -verwaltung in JavaScript verwendet. Die Verwendung von IndexedDB erfordert jedoch ein tieferes Verständnis und Übung sowie Überlegungen zur Browserkompatibilität. In der tatsächlichen Entwicklung müssen wir die geeignete Datenspeichermethode entsprechend den spezifischen Anforderungen auswählen, um die beste Leistung und Benutzererfahrung zu erzielen.
Das obige ist der detaillierte Inhalt vonStammdatenspeicherung und lokale Datenbanken in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!