Hướng dẫn này trình bày cách sử dụng Chrome DevTools để xem và thay đổi dữ liệu IndexedDB. Tài liệu này giả định rằng bạn đã quen thuộc với Công cụ cho nhà phát triển. Nếu không, hãy xem phần Bắt đầu. Hướng dẫn này cũng giả định rằng bạn đã quen thuộc với IndexedDB. Nếu không, hãy xem phần Sử dụng IndexedDB.
Xem dữ liệu IndexedDB
Nhấp vào thẻ Application (Ứng dụng) để mở bảng điều khiển Application (Ứng dụng). Mở rộng trình đơn IndexedDB để xem những cơ sở dữ liệu nào có sẵn.
Hình 1 Trình đơn IndexedDB
notes -
https://mdn.github.io đại diện cho một cơ sở dữ liệu, trong đó notes là tên của cơ sở dữ liệu và
https://mdn.github.io là nguồn gốc có thể truy cập vào cơ sở dữ liệu.
notes là một kho lưu trữ đối tượng.- title và body là chỉ mục.
Nhấp vào một cơ sở dữ liệu để xem nguồn gốc và số phiên bản của cơ sở dữ liệu đó.
Hình 2. Cơ sở dữ liệu notes
Nhấp vào một kho lưu trữ đối tượng để xem các cặp khoá-giá trị của kho lưu trữ đó.
Hình 3. Kho đối tượng notes
- Tổng số mục nhập là tổng số cặp khoá-giá trị trong kho lưu trữ đối tượng.
- Giá trị của trình tạo khoá là khoá có sẵn tiếp theo. Trường này chỉ xuất hiện khi sử dụng trình tạo khoá.
Nhấp vào một ô trong cột Giá trị để mở rộng giá trị đó.
Hình 4. Xem giá trị IndexedDB
Nhấp vào một chỉ mục, chẳng hạn như title (tiêu đề) hoặc body (nội dung) trong Hình 6 bên dưới, để sắp xếp kho lưu trữ đối tượng theo các giá trị của chỉ mục đó.
Hình 5. Kho lưu trữ đối tượng được sắp xếp theo thứ tự bảng chữ cái theo khoá title
Làm mới dữ liệu IndexedDB
Các giá trị IndexedDB trong bảng điều khiển Application (Ứng dụng) không cập nhật theo thời gian thực. Nhấp vào Làm mới
khi xem kho đối tượng để
làm mới dữ liệu hoặc xem cơ sở dữ liệu rồi nhấp vào Làm mới cơ sở dữ liệu để làm mới tất cả dữ liệu.
Hình 6. Xem cơ sở dữ liệu
Chỉnh sửa dữ liệu IndexedDB
Bạn không thể chỉnh sửa khoá và giá trị IndexedDB trong bảng điều khiển Ứng dụng. Tuy nhiên, vì Công cụ cho nhà phát triển có quyền truy cập vào bối cảnh trang, nên bạn có thể chạy mã JavaScript trong Công cụ cho nhà phát triển để chỉnh sửa dữ liệu IndexedDB.
Chỉnh sửa dữ liệu IndexedDB bằng Đoạn mã
Đoạn mã là một cách để lưu trữ và chạy các khối mã JavaScript trong Công cụ cho nhà phát triển. Khi bạn chạy một Đoạn mã, kết quả sẽ được ghi vào Bảng điều khiển. Bạn có thể sử dụng Đoạn mã để chạy mã JavaScript chỉnh sửa cơ sở dữ liệu IndexedDB.
Hình 7. Sử dụng Đoạn mã để tương tác với IndexedDB
Xoá dữ liệu IndexedDB
Xoá một cặp khoá-giá trị IndexedDB
- Xem kho đối tượng IndexedDB.
Nhấp vào cặp khoá-giá trị mà bạn muốn xoá. Công cụ cho nhà phát triển sẽ làm nổi bật phần tử đó bằng màu xanh dương để cho biết rằng phần tử đó đã được chọn.
Hình 8. Chọn một cặp khoá-giá trị để xoá
Nhấn phím Delete (Xoá) hoặc nhấp vào Xoá mục đã chọn
.
Hình 9. Giao diện của kho lưu trữ đối tượng sau khi cặp khoá-giá trị bị xoá
Xoá tất cả các cặp khoá-giá trị trong kho lưu trữ đối tượng
-
Hình 10. Xem kho lưu trữ đối tượng
Nhấp vào Xoá kho lưu trữ đối tượng
.
Xoá cơ sở dữ liệu IndexedDB
- Xem cơ sở dữ liệu IndexedDB mà bạn muốn xoá.
Nhấp vào Xoá cơ sở dữ liệu.
Hình 11 Nút Xoá cơ sở dữ liệu
Xoá tất cả bộ nhớ IndexedDB
- Mở ngăn Xoá bộ nhớ.
- Đảm bảo bạn đã chọn hộp đánh dấu IndexedDB.
Nhấp vào Xoá dữ liệu trang web.
Hình 12 Ngăn Xoá bộ nhớ