Quản Lý Sinh Viên - IndexedDB

Danh Sách Sinh Viên

ID	Họ Tên	Lớp	Thao tác

GIÁO TRÌNH: XÂY DỰNG WEB APP TRÊN BLOGSPOT

Chủ đề: Quản lý dữ liệu phía Client với IndexedDB

1. Tổng quan về kiến trúc

Thông thường, để làm web CRUD (Thêm, Sửa, Xóa), bạn cần Server và Database (MySQL, MongoDB). Tuy nhiên, với Blogspot, chúng ta không có quyền truy cập server. Giải pháp thay thế là sử dụng IndexedDB.

Khái niệm: IndexedDB là một hệ quản trị cơ sở dữ liệu NoSQL tích hợp sẵn trong các trình duyệt hiện đại (Chrome, Firefox, Edge).

2. Quy trình thực hiện (Workflow)

Khởi tạo: Mở kết nối đến DB và kiểm tra xem Store (bảng) đã tồn tại chưa.
Transaction (Giao dịch): Mọi thao tác đọc/ghi đều phải thông qua giao dịch để đảm bảo an toàn dữ liệu.
Xử lý DOM: Đồng bộ dữ liệu từ Database lên bảng HTML để người dùng nhìn thấy.

3. Phân tích mã nguồn chủ chốt

A. Hàm Lưu dữ liệu (put)

store.put({ name: "Nguyễn Văn A", class: "CNTT" });

Lệnh put() rất mạnh mẽ: Nếu dữ liệu chưa có (ID mới), nó sẽ Thêm. Nếu ID đã tồn tại, nó sẽ Cập nhật.

B. Con trỏ dữ liệu (Cursor)

Để lấy tất cả sinh viên, ta dùng vòng lặp con trỏ:

store.openCursor().onsuccess = (e) => {
    const cursor = e.target.result;
    if (cursor) { 
       // Xử lý từng dòng dữ liệu...
       cursor.continue(); 
    }
};

4. Ưu và Nhược điểm

Ưu điểm	Nhược điểm
Tốc độ cực nhanh (Offline-first)	Dữ liệu gắn liền với trình duyệt
Hoàn toàn miễn phí trên Blogspot	Khó đồng bộ giữa các thiết bị khác nhau