Stammdatenspeicherung und lokale Datenbanken in JavaScript
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!
JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AMDie Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AMZu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
Verständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AMEs ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AMPython eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
Python gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AMPython und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Von C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AMDie Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.
JavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AMUnterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.
Jenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AMZu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
