Xem và thay đổi dữ liệu IndexedDB

Hướng dẫn này cho bạn biết cách sử dụng Công cụ của Chrome cho nhà phát triển để xem và thay đổi dữ liệu IndexedDB. Bài viết 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

  1. 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 có những cơ sở dữ liệu nào.

    Trình đơn IndexedDB

    Hình 1 Trình đơn IndexedDB

    • Biểu tượng cơ sở dữ liệu 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.
    • Biểu tượng Kho đối tượng notes là một cửa hàng đối tượng.
    • titlebodychỉ mục.
  1. 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 đó.

    Cơ sở dữ liệu "notes"

    Hình 2. Cơ sở dữ liệu notes

  2. Nhấp vào một kho đối tượng để xem các cặp khoá-giá trị của kho đó.

    Kho lưu trữ đối tượng "notes"

    Hình 3. Kho lưu trữ đối tượng notes

    • Tổng số mục nhập là tổng số cặp khoá-giá trị trong kho đố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ỉ hiển thị khi sử dụng trình tạo khoá.
  3. Nhấp vào một ô trong cột Giá trị để mở rộng giá trị đó.

    Xem giá trị IndexedDB

    Hình 4. Xem giá trị IndexedDB

  4. 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 đối tượng theo giá trị của chỉ mục đó.

    Sắp xếp kho đối tượng theo chỉ mục

    Hình 5. Một kho đố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 biểu tượng Làm mới Làm mới khi xem kho đối tượng để làm mới dữ liệu của kho đối tượng đó, 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.

Xem cơ sở 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 từ bảng điều khiển Application (Ứng dụng). Tuy nhiên, vì DevTools có quyền truy cập vào ngữ cảnh trang, nên bạn có thể chạy mã JavaScript trong DevTools để 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 DevTools. Khi bạn chạy một Đoạn mã, kết quả sẽ được ghi vào Console. Bạn có thể sử dụng Đoạn mã để chạy mã JavaScript chỉnh sửa cơ sở dữ liệu IndexedDB.

Sử dụng Đoạn mã để tương tác với IndexedDB

Hình 7. Sử dụng Đoạn mã để tương tác với IndexedDB

Xoá dữ liệu IndexedDB

Xoá cặp khoá-giá trị IndexedDB

  1. Xem cửa hàng đối tượng IndexedDB.
  2. Nhấp vào cặp khoá-giá trị mà bạn muốn xoá. DevTools sẽ đánh dấu thành phần này bằng màu xanh dương để cho biết rằng thành phần này đã được chọn.

    Chọn một cặp khoá-giá trị để xoá cặp đó

    Hình 8. Chọn một cặp khoá-giá trị để xoá

  3. Nhấn phím Delete (Xoá) hoặc nhấp vào biểu tượng Delete Selected (Xoá các mục đã chọn) Xóa mục đã Chọn.

    Cửa hàng đối tượng trông như thế nào sau khi xoá cặp khoá-giá trị

    Hình 9. Cửa hàng đối tượng trông như thế nào sau khi xoá cặp khoá-giá trị

Xoá tất cả cặp khoá-giá trị trong kho đối tượng

  1. Xem cửa hàng đối tượng IndexedDB.

    Xem kho đối tượng

    Hình 10. Xem kho đối tượng

  2. Nhấp vào Xoá cửa hàng đối tượng Xoá cửa hàng đối tượng.

Xoá cơ sở dữ liệu IndexedDB

  1. Xem cơ sở dữ liệu IndexedDB mà bạn muốn xoá.
  2. Nhấp vào Xoá cơ sở dữ liệu.

    Nút "Xoá cơ sở dữ liệu"

    Hình 11 Nút Delete database (Xoá cơ sở dữ liệu)

Xoá tất cả bộ nhớ IndexedDB

  1. Mở ngăn Xoá bộ nhớ.
  2. Đảm bảo bạn đã bật hộp đánh dấu IndexedDB.
  3. Nhấp vào Xoá dữ liệu trang web.

    Ngăn "Xoá bộ nhớ"

    Hình 12 Ngăn Xoá bộ nhớ