Hello các bạn mình là Danh. Tiếp nối phần trước thì hôm nay mình sẽ hướng dẫn các bạn set up project sử dụng indexedDB

Làm thế nào để sử dụng indexedDB ?

Mỗi trình duyệt thì phần store indexedDB có một tên gọi khác nhau. Nhưng chúng có 1 điểm chung là chúng có API giống nhau. Vì thế chúng ta chỉ cần duyệt qua một lượt các tên mà mỗi trình duyệt cung cấp để gọi API. ví dụ với Google là indexedDB, firefox là mozIndexedDB, …

1. Kiểm tra brower

// kiểm tra brower có hỗ trợ lưu trữ ở store indexedDB hay không

const indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB ||
  window.shimIndexedDB;

if (!indexedDB) {
  console.log("IndexedDB could not be found in this browser.");
}

Trong trường hợp brower không hỗ trợ lúc này của sổ devtool Console hiện lên một thông báo thất bại.

2. Gọi đến DB

Tiếp theo chúng ta thực hiện gọi một request yêu cầu mở phiên bản database cấu trúc code như sau:

// thực hiện yêu cầu mở phiên bản cơ sở dữ liệu
const request = indexedDB.open("CoderDatabase", 1);

• indexedDB: là hằng số mà chúng ta đã khai báo để kiểm tra brower có hỗ trợ store indexedDB không.

• open: là phương thức mà chúng ta muốn gọi đến.

• CoderDatabase: là tham số đầu tiên là tên của DB mà bạn muốn gọi đến (nếu tên db này k có trong store indexedDB thì sẽ tạo mới một db).

• 1 : là số của phiên bảng db của bạn (số này sẽ thay đổi khi bạn cập nhật phiên bản db bạn sẽ phải nâng con số này lên để người dùng sẽ được sử dụng phiên bản mới nhất).

Khi một sự kiện sảy ra chúng ta phải kiểm tra sự kiện diễn ra có thành công hay không.

// kiểm tra sự kiện open sảy ra có lỗi hay không
request.onerror = function (event) {
  console.error("An error occurred with IndexedDB");
  console.error(event);
};

Lưu ý: có thể xảy ra lỗi nếu bạn sử dụng brower ở chế độ riêng tư hoặc ẩn danh. Nên nếu có lỗi xảy ra thì bạn hãy tắt chế độ riêng tư và ẩn danh đi nhé.

3. Tạo object store

Khởi tạo lần đầu tiên phải xác định hình dạng cơ sở dữ liệu chúng ta sẽ làm như sau:

// khởi tạo object data
request.onupgradeneeded = function () {
  // khởi tạo biến nhận vào kết quả của request
  const db = request.result;
  // tạo object store
  const store = db.createObjectStore("Coder", {
    keyPath: "id",
    autoIncrement: true,
  });
  // tạo chỉ mục để tìm kiếm
  store.createIndex("Coder_name", ["name"], { unique: false });
  // tạo chỉ mục để tìm kiếm 
  store.createIndex(
    "name_language_framework",
    ["name", "language", "framework"],
    {
      unique: false,
    }
  );
};

• Khai bảo biến db là kết quả của một request (kết quả của một request là obj của database đó).

• khởi tạo một biến store dùng để tạo mới 1 store lưu dữ liệu với tham số đầu tiên là collection name (tên của database), tham số thứ hai là một object chứa key path là một trường dùng để xác định đối tượng trong db và các thuộc tính khác, ví dụ là autoIncrement giúp trường đó trở thành 1 giá trị unique tự động tăng lên.

• sau đó chúng ta thêm vào các chỉ mục để chúng ta có thể tìm kiếm các đối tượng dựa vào các đặt tính mà mình mong muốn.

• tương tự như ở trên ta có thể thêm các chỉ mục để chúng ta có thể tìm kiếm các đối tượng dựa vào nhiều đặc điểm hơn

4. Thêm dữ liệu

Tới đây chúng ta đã tạo được database và bây giờ chúng ta sẽ thao tác để tạo data base.

request.onsuccess = function () {
  console.log("Database opened successfully");
  const db = request.result;

  // khởi tạo một giao dịch (param1: tên database, param2: chế độ mà người dùng có thể thao tác)
  const transaction = db.transaction("Coder", "readwrite");

  // tạo tham chiếu đến các đối tượng của database
  const store = transaction.objectStore("Coder");
  const nameIndex = store.index("Coder_name");
  const nameLanguageFrameworkIndex = store.index("name_language_framework");

  // phương thức put là phương thức để thêm dữ liệu vào database
  store.put({ id: 1, name: "Danh", language: "JS", framework: "Vuejs" });
  store.put({ id: 2, name: "Duy", language: "JAVA", framework: "Spring boot" });
  store.put({ id: 3, name: "Long", language: "PHP", framework: "Laravel" });
  store.put({ id: 4, name: "LĨnh", language: "JS", framework: "Angular" });

};

Tới đây khi chúng ta run code thì vào phần devtool => application => indexedDB => tên database ta sẽ thấy

5. Lấy dữ liệu

Tương tự như gọi api thì ở đây mình giới thiệu bạn 2 cách lấy dữ liệu: getAll(), get(id) và lấy dữ liệu được chỉ định

request.onsuccess = function () {
  console.log("Database opened successfully");
  const db = request.result;

  const transaction = db.transaction("Coder", "readwrite");

  const store = transaction.objectStore("Coder");
  const nameIndex = store.index("Coder_name");
  const nameLanguageFrameworkIndex = store.index("name_language_framework");


  // Get all 
  const GetAllQuery = store.getAll();
  idQuery.onsuccess = function () {
    console.log("idQuery", idQuery.result);
  };  
  // Get By Id
  const idQuery = store.get(3);
  idQuery.onsuccess = function () {
    console.log("idQuery", idQuery.result);
  };
  // lấy dữ liệu được chỉ định
  const filterQuery = nameIndex.getAll(["Danh"]);
  filterQuery.onsuccess = function () {
    console.log("filterQuery", filterQuery.result);
  };

// lấy dữ liệu được chỉ định nhiều thuộc tính các bạn tự làm nhé tương tự thôi dựa vào nameLanguageFrameworkIndex nhé

  // // đóng kết nối và bạn cũng không cần kích hoạt giao dịch thủ công indexed sẽ tự chạy
  transaction.oncomplete = function () {
    db.close();
  };
};

6. chỉnh sửa dữ liệu và xóa dữ liệu.

Update data

  const objectDataDanh = store.get(1);

  objectDataDanh.onsuccess = function () {
    objectDataDanh.result.language = "C#";
    store.put(objectDataDanh.result);
  };

delete data

  const deleteObjectDanh = store.delete(1);

  deleteObjectDanh.onsuccess = function () {
    console.log("object danh has been removed");
  };

Kết thúc

Và đó là cách mà các bạn khởi tạo và thao tác với dữ liệu indexedDB và mình là danh mọi thông tin thắc mắc các bạn vui lòng liên hệ với mình qua gmail: danh@allxone.vn cảm ơn các bạn đã đọc!