Untuk menguasai storan data dan pangkalan data tempatan dalam JavaScript, contoh kod khusus diperlukan
Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat Internet dan populariti peranti pintar, penyimpanan dan pengurusan data telah menjadi salah satu aspek teknikal yang penting. keperluan. Dalam JavaScript, kaedah penyimpanan data sangat pelbagai, termasuk Kuki biasa, Storan Web, IndexedDB, dsb. Memahami dan menguasai kaedah penyimpanan data ini boleh membantu kami membangunkan dan mengurus aplikasi dengan lebih cekap.
Dalam artikel sebelumnya, kami telah memperkenalkan Kuki dan Storan Web dalam JavaScript secara terperinci Artikel ini akan memfokuskan pada pangkalan data tempatan yang lebih berkuasa dan kompleks-IndexedDB.
IndexedDB ialah API untuk mencipta dan mengurus pangkalan data dalam penyemak imbas, yang menyediakan cara yang sangat berkuasa dan fleksibel untuk menyimpan dan mendapatkan semula data. IndexedDB menggunakan struktur data pangkalan data bukan perhubungan, di mana data disimpan dalam bentuk pasangan nilai kunci dan menyokong penciptaan dan pertanyaan indeks.
Di bawah ini kami akan menggunakan contoh kod khusus untuk menunjukkan cara menggunakan IndexedDB untuk mencipta pangkalan data dalam penyemak imbas dan melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan data.
Pertama, kita perlu mencipta halaman HTML dan menambah butang untuk mengendalikan IndexedDB dan bekas untuk memaparkan data:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IndexedDB Demo</title>
</head>
<body>
<button id="addButton">增加數(shù)據(jù)</button>
<button id="deleteButton">刪除數(shù)據(jù)</button>
<button id="updateButton">更新數(shù)據(jù)</button>
<button id="queryButton">查詢(xún)數(shù)據(jù)</button>
<div id="resultContainer"></div>
<script src="main.js"></script>
</body>
</html>
Kemudian, dalam fail JavaScript main.js, kita boleh menulis sekeping kod untuk mencipta pangkalan data IndexedDB dan Lakukan operasi menambah, memadam, mengemas kini dan menanyakan data:
// 打開(kāi)或創(chuàng)建一個(gè)名為MyDatabase的IndexedDB數(shù)據(jù)庫(kù)
var request = indexedDB.open("MyDatabase", 1);
// 如果數(shù)據(jù)庫(kù)不存在，則創(chuàng)建
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
};
// 數(shù)據(jù)庫(kù)創(chuàng)建成功后的回調(diào)函數(shù)
request.onsuccess = function(event) {
var db = event.target.result;
// 增加數(shù)據(jù)
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");
};
};
// 刪除數(shù)據(jù)
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");
};
};
// 更新數(shù)據(jù)
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");
};
};
// 查詢(xún)數(shù)據(jù)
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");
};
};
};
// 數(shù)據(jù)庫(kù)創(chuàng)建失敗后的回調(diào)函數(shù)
request.onerror = function(event) {
console.log("Error creating database");
};Melalui kod di atas, kami telah melaksanakan operasi menambah, memadam, mengemas kini dan menanya data masing-masing. Apabila pengguna mengklik butang, tindakan yang sepadan akan dicetuskan dan dilaksanakan.
Melalui contoh mudah ini, kita dapat melihat bahawa IndexedDB, sebagai pangkalan data tempatan, menyediakan pelbagai fungsi dan operasi fleksibel dalam JavaScript. Mahir dalam IndexedDB bukan sahaja boleh mengoptimumkan proses penyimpanan dan pertanyaan bagi sejumlah besar data, tetapi juga meningkatkan kelajuan tindak balas dan pengalaman pengguna aplikasi.
Ringkasnya, melalui contoh kod khusus, kami mempelajari cara menggunakan IndexedDB untuk penyimpanan dan pengurusan data dalam JavaScript. Walau bagaimanapun, menggunakan IndexedDB memerlukan pemahaman dan amalan yang lebih mendalam, serta pertimbangan keserasian penyemak imbas. Dalam pembangunan sebenar, kita perlu memilih kaedah penyimpanan data yang sesuai mengikut keperluan khusus untuk mencapai prestasi terbaik dan pengalaman pengguna.
Atas ialah kandungan terperinci Kuasai storan data dan pangkalan data tempatan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!