HTML - IndexedDB: Cơ sở dữ liệu cá nhân trong Trình duyệt

Xin chào, các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới đầy.exciting của IndexedDB. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn trong hành trình này, ngay cả khi bạn chưa từng viết một dòng mã trước đây. Vậy, hãy mang theo mũ bảo hiểm ảo của bạn, và chúng ta cùng bắt đầu xây dựng!

HTML - IndexedDB

IndexedDB là gì?

IndexedDB là một cơ sở dữ liệu nhỏ bé sống ngay trong trình duyệt web của bạn. Hãy tưởng tượng có một tủ đựng hồ sơ nhỏ trong máy tính của bạn có thể lưu trữ và tổ chức mọi loại thông tin cho các ứng dụng web của bạn. Đúng là rất tuyệt vời, phải không?

Tại sao sử dụng IndexedDB?

Bạn có thể tự hỏi, "Tại sao chúng ta cần một cách khác để lưu trữ dữ liệu?" Hãy để tôi kể cho bạn một câu chuyện ngắn. Ngày xưa, chúng ta từng dựa vào cookies và bộ nhớ cục bộ để giữ dữ liệu trong trình duyệt. Nhưng chúng giống như việc cố gắng nhét một con voi vào hộp diêm - giới hạn và không linh hoạt.

Dưới đây là lý do tại sao IndexedDB là siêu anh hùng của bộ nhớ trình duyệt:

Tính năng	Mô tả
Dung lượng lưu trữ	Có thể lưu trữ nhiều dữ liệu hơn cookies hoặc bộ nhớ cục bộ
Loại dữ liệu	Hỗ trợ nhiều loại dữ liệu, bao gồm cả tệp và blobs
Indexing	Cho phép tìm kiếm nhanh chóng qua dữ liệu của bạn
Giao dịch	Đảm bảo tính toàn vẹn dữ liệu với các thao tác dựa trên giao dịch
Tương tự步	Không làm冻结 ứng dụng của bạn khi làm việc với dữ liệu

Bắt đầu với IndexedDB

Hãy撸 lên áo và bắt đầu với một chút mã thực tế. Đừng lo nếu nó trông có vẻ đáng sợ ban đầu - chúng ta sẽ phân tích nó từng bước.

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("Lỗi cơ sở dữ liệu: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("Mở cơ sở dữ liệu thành công");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("Kho đối tượng được tạo");
};

Woah! Đó là một điều khó nuốt, phải không? Hãy cùng phân tích nó:

Chúng ta bắt đầu bằng cách khai báo một biến db để giữ kết nối cơ sở dữ liệu.
Chúng ta sử dụng indexedDB.open() để mở (hoặc tạo) một cơ sở dữ liệu có tên "MyFirstDatabase".
Chúng ta thiết lập ba bộ xử lý sự kiện:

onerror: Chạy nếu có điều gì đó xảy ra sai.
onsuccess: Chạy khi cơ sở dữ liệu được mở thành công.
onupgradeneeded: Chạy khi cơ sở dữ liệu được tạo hoặc nâng cấp.

Hãy nghĩ về onupgradeneeded như một kiến trúc sư cơ sở dữ liệu. Đây là nơi chúng ta thiết kế cấu trúc cơ sở dữ liệu của mình.

Thêm dữ liệu vào IndexedDB

Bây giờ chúng ta đã thiết lập cơ sở dữ liệu, hãy thêm một chút dữ liệu vào đó. Hãy tưởng tượng chúng ta đang tạo một hệ thống quản lý học sinh.

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("Lỗi thêm học sinh: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Học sinh được thêm thành công");
};
}

// Sử dụng
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

Dưới đây là những gì đang xảy ra:

Chúng ta tạo một giao dịch - hãy tưởng tượng nó như một đường hầm an toàn cho dữ liệu của chúng ta.
Chúng ta lấy kho đối tượng (giống như một bảng trong cơ sở dữ liệu truyền thống).
Chúng ta sử dụng add() để chèn dữ liệu học sinh.
Chúng ta thiết lập các bộ xử lý thành công và lỗi để biết nếu nó hoạt động.

Truy xuất dữ liệu từ IndexedDB

Dữ liệu lưu trữ không có ích nếu chúng ta không thể truy xuất nó. Hãy lấy dữ liệu học sinh của chúng ta:

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Lỗi lấy học sinh: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("Học sinh tìm thấy:", request.result);
} else {
console.log("Học sinh không tìm thấy");
}
};
}

// Sử dụng
getStudent(1);

Hàm này giống như một thư viện viên lấy một cuốn sách cho bạn:

Chúng ta bắt đầu một giao dịch chỉ đọc (chúng ta không thay đổi gì).
Chúng ta sử dụng get() để truy xuất học sinh theo ID.
Nếu chúng ta tìm thấy học sinh, chúng ta ghi chi tiết của họ; nếu không, chúng ta nói rằng họ không được tìm thấy.

Cập nhật dữ liệu trong IndexedDB

Học sinh cải thiện, điểm số thay đổi. Hãy cập nhật hồ sơ của chúng ta:

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Lỗi lấy học sinh để cập nhật: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("Lỗi cập nhật học sinh: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("Học sinh được cập nhật thành công");
};
};
}

// Sử dụng
updateStudent(1, "A+");

Hàm này giống như một giáo viên cập nhật sổ điểm:

Chúng ta lấy dữ liệu hiện tại của học sinh.
Chúng ta sửa điểm số.
Chúng ta sử dụng put() để lưu dữ liệu đã cập nhật trở lại cơ sở dữ liệu.

Xóa dữ liệu khỏi IndexedDB

Đôi khi, chúng ta cần xóa dữ liệu. Hãy thêm một hàm để xóa học sinh:

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("Lỗi xóa học sinh: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Học sinh được xóa thành công");
};
}

// Sử dụng
deleteStudent(2);

Đây là như xóa một mục từ hồ sơ học sinh của chúng ta:

Chúng ta bắt đầu một giao dịch "readwrite" vì chúng ta đang thay đổi dữ liệu.
Chúng ta sử dụng phương thức delete() để xóa học sinh theo ID.
Chúng ta xử lý các trường hợp thành công và lỗi để biết nếu nó hoạt động.

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới của IndexedDB. Chúng ta đã bao gồm việc tạo cơ sở dữ liệu, thêm, truy xuất, cập nhật và xóa dữ liệu. Đây là các thao tác cơ bản bạn sẽ sử dụng khi làm việc với IndexedDB.

Nhớ rằng, thực hành làm nên hoàn hảo. Hãy thử tạo một số dự án nhỏ của riêng bạn sử dụng IndexedDB. Có thể là một ứng dụng danh sách việc cần làm hoặc nhật ký cá nhân. Càng chơi với nó, bạn sẽ càng trở nên thoải mái hơn.

IndexedDB có thể trông phức tạp ban đầu, nhưng nó là một công cụ mạnh mẽ có thể đưa ứng dụng web của bạn lên một tầm cao mới. Nó giống như có một siêu năng lực - khả năng lưu trữ và quản lý một lượng lớn dữ liệu ngay trong trình duyệt.

Tiếp tục lập mã, 保持好奇心, và đừng quên vui vẻ trên đường đi! Ai biết được? Ứng dụng web lớn tiếp theo có thể đang ở trong tầm tay bạn.

Credits: Image by storyset