Maison > Article > interface Web > Stockage des données de base et bases de données locales en JavaScript
Stockage des données de base et bases de données locales en JavaScript
- WBOYoriginal
- 2023-11-04 11:59:11987parcourir
Pour maîtriser le stockage de données et les bases de données locales en JavaScript, des exemples de code spécifiques sont nécessaires
Ces dernières années, avec le développement rapide d'Internet et la popularité des appareils intelligents, le stockage et la gestion des données sont devenus l'un des aspects techniques importants besoins. En JavaScript, les méthodes de stockage de données sont très diverses, notamment les cookies courants, le stockage Web, IndexedDB, etc. Comprendre et maîtriser ces méthodes de stockage de données peut nous aider à développer et à gérer des applications plus efficacement.
Dans les articles précédents, nous avons présenté en détail les cookies et le stockage Web en JavaScript. Cet article se concentrera sur la base de données locale plus puissante et plus complexe, IndexedDB.
IndexedDB est une API pour créer et gérer des bases de données dans le navigateur, qui offre un moyen très puissant et flexible de stocker et de récupérer des données. IndexedDB utilise la structure de données d'une base de données non relationnelle, dans laquelle les données sont stockées sous forme de paires clé-valeur et prend en charge la création et la requête d'index.
Ci-dessous, nous utiliserons un exemple de code spécifique pour montrer comment utiliser IndexedDB pour créer une base de données dans le navigateur et effectuer des opérations d'ajout, de suppression, de modification et de requête de données.
Tout d'abord, nous devons créer une page HTML et ajouter un bouton pour faire fonctionner IndexedDB et un conteneur pour afficher les données :
<!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>
Ensuite, dans le fichier JavaScript main.js, nous pouvons écrire un morceau de code pour créer une base de données IndexedDB et Effectuer des opérations d'ajout, de suppression, de mise à jour et d'interrogation de données :
// 打开或创建一个名为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");
};Grâce au code ci-dessus, nous avons implémenté respectivement les opérations d'ajout, de suppression, de mise à jour et d'interrogation de données. Lorsque l'utilisateur clique sur le bouton, l'action correspondante sera déclenchée et exécutée.
À travers cet exemple simple, nous pouvons voir qu'IndexedDB, en tant que base de données locale, fournit un large éventail de fonctions et d'opérations flexibles en JavaScript. La maîtrise d'IndexedDB peut non seulement optimiser le processus de stockage et d'interrogation de grandes quantités de données, mais également améliorer la vitesse de réponse et l'expérience utilisateur de l'application.
En résumé, à travers des exemples de code spécifiques, nous avons appris à utiliser IndexedDB pour le stockage et la gestion de données en JavaScript. Cependant, l’utilisation d’IndexedDB nécessite une compréhension et une pratique plus approfondies, ainsi que des considérations en matière de compatibilité du navigateur. Dans le développement réel, nous devons choisir la méthode de stockage de données appropriée en fonction des besoins spécifiques pour obtenir les meilleures performances et expérience utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!