Ứng dụng web tiến bộ: IndexedDB

1. Chào mừng bạn

Trong phòng thí nghiệm này, bạn sẽ sao lưu và khôi phục dữ liệu ứng dụng vào IndexedDB. Đây là lớp học lập trình thứ ba trong loạt lớp học lập trình đồng hành cho hội thảo về Ứng dụng web tiến bộ. Lớp học lập trình trước đây là Làm việc với Workbox. Còn 5 lớp học lập trình nữa trong loạt lớp học lập trình này.

Kiến thức bạn sẽ học được

  • Tạo cơ sở dữ liệu IndexedDB và kho lưu trữ đối tượng bằng idb
  • Thêm và truy xuất các mục vào một kho đối tượng

Những điều bạn cần biết

  • JavaScript và Promise

Bạn cần có

2. Bắt đầu thiết lập

Bắt đầu bằng cách sao chép hoặc tải mã khởi đầu cần thiết để hoàn tất lớp học lập trình này:

Nếu bạn sao chép repo, hãy đảm bảo rằng bạn đang ở nhánh pwa03--indexeddb. Tệp zip cũng chứa mã cho nhánh đó.

Cơ sở mã này yêu cầu Node.js 14 trở lên. Sau khi có mã, hãy chạy npm ci từ dòng lệnh trong thư mục mã để cài đặt tất cả các phần phụ thuộc mà bạn sẽ cần. Sau đó, hãy chạy npm start để khởi động máy chủ phát triển cho lớp học lập trình.

Tệp README.md của mã nguồn cung cấp nội dung giải thích cho tất cả các tệp được phân phối. Ngoài ra, sau đây là các tệp hiện có chính mà bạn sẽ sử dụng trong suốt lớp học lập trình này:

Tệp khoá

  • js/main.js – Tệp JavaScript của ứng dụng chính

3. Thiết lập cơ sở dữ liệu

Trước khi có thể sử dụng, bạn cần mở và thiết lập cơ sở dữ liệu IndexedDB. Mặc dù bạn có thể thực hiện việc này trực tiếp, nhưng vì IndexedDB được chuẩn hoá trước khi Promises trở nên nổi bật, nên giao diện dựa trên lệnh gọi lại của IndexedDB có thể khó sử dụng. Thay vào đó, chúng ta sẽ sử dụng idb, một trình bao bọc Promise rất nhỏ cho IndexedDB. Để bắt đầu, trước tiên hãy nhập tệp đó vào js/main.js:

import { openDB } from 'idb';

Sau đó, hãy thêm mã thiết lập sau vào đầu trình nghe sự kiện DOMContentLoaded:

// Set up the database
const db = await openDB('settings-store', 1, {
  upgrade(db) {
    db.createObjectStore('settings');
  },
});

Giải thích

Ở đây, một cơ sở dữ liệu IndexedDB có tên là settings-store sẽ được tạo. Phiên bản của nó được khởi chạy thành 1 và được khởi chạy bằng một kho đối tượng có tên là settings. Đây là loại kho lưu trữ đối tượng cơ bản nhất, các cặp khoá-giá trị đơn giản, nhưng bạn có thể tạo các kho lưu trữ đối tượng phức tạp hơn khi cần. Nếu không khởi tạo bộ nhớ đối tượng này, sẽ không có nơi nào để đặt dữ liệu vào, vì vậy, việc bỏ qua bước này cũng giống như tạo một cơ sở dữ liệu mà không có bảng.

4. Lưu trạng thái của trình chỉnh sửa khi cập nhật

Sau khi khởi tạo cơ sở dữ liệu, đã đến lúc lưu nội dung vào cơ sở dữ liệu đó! Trình chỉnh sửa hiển thị một phương thức onUpdate cho phép bạn truyền một hàm sẽ được gọi bất cứ khi nào nội dung được cập nhật trong trình chỉnh sửa. Đây là nơi lý tưởng để nhấn vào và thêm các thay đổi vào cơ sở dữ liệu. Để thực hiện việc này, hãy thêm mã sau ngay trước khai báo defaultText trong js/main.js:

// Save content to database on edit
editor.onUpdate(async (content) => {
  await db.put('settings', content, 'content');
});

Giải thích

db là cơ sở dữ liệu IndexedDB đã mở trước đó. Phương thức put cho phép tạo hoặc cập nhật các mục trong một kho lưu trữ đối tượng trong cơ sở dữ liệu đó. Đối số đầu tiên là kho đối tượng trong cơ sở dữ liệu cần sử dụng, đối số thứ hai là giá trị cần lưu trữ và đối số thứ ba là khoá để lưu giá trị vào nếu không rõ ràng từ giá trị (trong trường hợp này, khoá không được chỉ định vì cơ sở dữ liệu của chúng tôi không có khoá được chỉ định). Vì là không đồng bộ, nên nó được bao bọc trong async/await.

5. Truy xuất trạng thái khi tải

Cuối cùng, để khôi phục công việc đang tiến hành của người dùng, công việc đó cần được tải khi trình chỉnh sửa tải. Trình chỉnh sửa cung cấp một phương thức setContent để thực hiện việc đó, đặt nội dung của phương thức. Hiện tại, bạn có thể dùng thuộc tính này để đặt giá trị defaultText. Cập nhật tệp này bằng nội dung sau để tải công việc trước đó của người dùng vào:

editor.setContent((await db.get('settings', 'content')) || defaultText);

Giải thích

Thay vì chỉ đặt trình chỉnh sửa thành giá trị của defaultText, giờ đây, trình chỉnh sửa sẽ cố gắng lấy khoá content từ kho đối tượng settings trong cơ sở dữ liệu settings-store IndexedDB. Nếu giá trị đó tồn tại, thì giá trị đó sẽ được dùng. Nếu không, hệ thống sẽ sử dụng văn bản mặc định.

6. Đặt và truy xuất trạng thái Chế độ ban đêm

Bây giờ, bạn đã quen với IndexedDB, hãy thêm mã sau vào cuối js/main.js và cập nhật mã đó để lưu lựa chọn ưu tiên về chế độ ban đêm của người dùng khi lựa chọn này thay đổi, đồng thời tải lựa chọn ưu tiên đó khi chế độ ban đêm khởi động.

// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
  document.querySelector('#mode'),
  async (mode) => {
    editor.setTheme(mode);
    // Save the night mode setting when changed
  },
  // Retrieve the night mode setting on initialization
);

7. Xin chúc mừng!

Bạn đã tìm hiểu cách lưu và tải dữ liệu từ một kho lưu trữ đối tượng trong IndexedDB.

Lớp học lập trình tiếp theo trong loạt lớp học lập trình này là Từ thẻ đến thanh tác vụ