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!
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
Warum kann localstorage Daten nicht erfolgreich speichern?
Jan 03, 2024 pm 01:41 PM
Warum schlägt das Speichern von Daten im lokalen Speicher immer fehl? Benötigen Sie spezifische Codebeispiele? In der Front-End-Entwicklung müssen wir häufig Daten auf der Browserseite speichern, um die Benutzererfahrung zu verbessern und den späteren Datenzugriff zu erleichtern. Localstorage ist eine von HTML5 bereitgestellte Technologie zur clientseitigen Datenspeicherung. Sie bietet eine einfache Möglichkeit, Daten zu speichern und die Datenpersistenz aufrechtzuerhalten, nachdem die Seite aktualisiert oder geschlossen wurde. Wenn wir jedoch manchmal localstorage zur Datenspeicherung verwenden
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Welcher Dateityp ist eine DAT-Datei?
Feb 19, 2024 am 11:32 AM
Die DAT-Datei ist ein universelles Datendateiformat, das zum Speichern verschiedener Datentypen verwendet werden kann. DAT-Dateien können verschiedene Datenformen wie Text, Bilder, Audio und Video enthalten. Es wird häufig in vielen verschiedenen Anwendungen und Betriebssystemen verwendet. dat-Dateien sind in der Regel Binärdateien, die Daten in Bytes statt in Textform speichern. Das bedeutet, dass DAT-Dateien nicht geändert oder ihr Inhalt direkt mit einem Texteditor angezeigt werden kann. Stattdessen sind spezielle Software oder Tools erforderlich, um die Daten von DAT-Dateien zu verarbeiten und zu analysieren. D
