Cách sử dụng IndexedDB làm cơ sở dữ liệu

IndexedDB là cơ sở dữ liệu NoSQL phía máy khách cho phép bạn lưu trữ và truy xuất dữ liệu có cấu trúc trong trình duyệt web của người dùng.

IndexedDB cung cấp một số lợi thế, chẳng hạn như bộ nhớ lớn hơn và lưu trữ và truy xuất dữ liệu ngoại tuyến so với các tùy chọn lưu trữ khác, chẳng hạn như localStorage. Ở đây bạn sẽ học cách sử dụng IndexedDB làm cơ sở dữ liệu.

Thiết lập cơ sở dữ liệu của bạn

Để tạo cơ sở dữ liệu, bạn phải tạo một yêu cầu mở bằng IndexedDB’s mở phương pháp. Các mở phương thức trả về một IDBOpenDBRequest sự vật. Đối tượng này cung cấp quyền truy cập vào thành công, lỗiVà cần nâng cấp sự kiện phát ra từ hoạt động mở.

Các mở phương thức nhận hai đối số: tên và số phiên bản tùy chọn. Đối số tên đại diện cho tên cơ sở dữ liệu của bạn. Số phiên bản chỉ định phiên bản cơ sở dữ liệu mà ứng dụng của bạn dự kiến ​​sẽ hoạt động. Giá trị mặc định là số không.

Đây là cách tạo một yêu cầu mở:

 const openRequest = indexedDB.open("usersdb", 1);
 

Sau khi tạo yêu cầu mở, bạn cần lắng nghe và xử lý các sự kiện trên đối tượng được trả về.

Các thành công sự kiện xảy ra khi bạn tạo cơ sở dữ liệu thành công. Sau khi được phát ra, bạn có quyền truy cập vào đối tượng cơ sở dữ liệu của mình thông qua sự kiện.mục tiêu.kết quả:

 openRequest.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database created", db);
};
 

Ví dụ trên xử lý một sự kiện thành công bằng cách ghi nhật ký đối tượng cơ sở dữ liệu.

Các lỗi sự kiện xảy ra nếu IndexedDB gặp sự cố trong khi tạo cơ sở dữ liệu. Bạn có thể xử lý bằng cách ghi lỗi vào bảng điều khiển hoặc sử dụng các phương pháp xử lý lỗi khác:

 openRequest.onerror = function (event) {
  
};
 

Các cần nâng cấp sự kiện xảy ra khi bạn tạo cơ sở dữ liệu lần đầu tiên hoặc khi bạn cập nhật phiên bản của nó. Nó chỉ kích hoạt một lần, khiến nó trở thành nơi lý tưởng để tạo kho lưu trữ đối tượng.

Tạo một cửa hàng đối tượng

Một kho lưu trữ đối tượng tương tự như một bảng trong cơ sở dữ liệu quan hệ phía máy chủ. Bạn có thể sử dụng kho lưu trữ đối tượng để lưu trữ các cặp khóa-giá trị.

Bạn nên tạo các cửa hàng đối tượng để đáp ứng với cần nâng cấp sự kiện. Sự kiện này kích hoạt khi bạn tạo phiên bản mới của cơ sở dữ liệu hoặc nâng cấp phiên bản hiện có. Điều này đảm bảo cơ sở dữ liệu được định cấu hình chính xác và cập nhật trước khi bạn thêm bất kỳ dữ liệu nào.

Bạn có thể tạo một cửa hàng đối tượng bằng cách sử dụng tạoObjectStore phương thức mà bạn có thể truy cập trên tham chiếu cơ sở dữ liệu của mình. Phương thức này lấy tên của đối tượng lưu trữ và đối tượng cấu hình làm đối số.

Trong đối tượng cấu hình, bạn phải xác định khóa chính. Bạn có thể xác định khóa chính bằng cách xác định đường dẫn khóa, đây là thuộc tính luôn tồn tại và chứa một giá trị duy nhất. Ngoài ra, bạn có thể sử dụng trình tạo khóa bằng cách đặt keyPath tài sản để “nhận dạng” và tự động tăng tài sản để ĐÚNG VẬY trong đối tượng cấu hình của bạn.

Ví dụ:

 openRequest.onupgradeneeded = function (event) {
  const db = event.target.result;
  
  const userObjectStore = db.createObjectStore("userStore", {
    keyPath: "id",
    autoIncrement: true,
  });
}
 

Ví dụ này tạo một cửa hàng đối tượng có tên là “userStore” trong cơ sở dữ liệu của bạn và đặt khóa chính của nó thành id tăng tự động.

Xác định chỉ mục

Trong IndexedDB, chỉ mục là một cách để tổ chức và truy xuất dữ liệu hiệu quả hơn. Điều này cho phép bạn tìm kiếm kho đối tượng và sắp xếp nó dựa trên các thuộc tính được lập chỉ mục.

Để xác định một chỉ mục trên một kho lưu trữ đối tượng, hãy sử dụng tạo Index() phương thức của một đối tượng lưu trữ đối tượng. Phương thức này lấy tên chỉ mục, tên thuộc tính và đối tượng cấu hình làm đối số:

 userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });
 

Khối mã trên xác định hai chỉ mục, “tên” và “email” trên userObjectStore. Chỉ mục “tên” không phải là duy nhất, nghĩa là nhiều đối tượng có thể có cùng giá trị tên, trong khi chỉ mục “email” là duy nhất, đảm bảo rằng không có hai đối tượng nào có thể có cùng giá trị email.

Đây là một ví dụ đầy đủ về cách bạn có thể xử lý một cần nâng cấp sự kiện:

 openRequest.onupgradeneeded = function (event) {
  const db = event.target.result;
  
  const userObjectStore = db.createObjectStore("userStore", {
    keyPath: "id",
    autoIncrement: true,
  }); 
  
  userObjectStore.createIndex("name", "name", { unique: false });
  userObjectStore.createIndex("email", "email", { unique: true });
}; 

Thêm dữ liệu vào IndexedDB

Một giao dịch trong IndexedDB là một cách để nhóm nhiều thao tác đọc và ghi thành một thao tác duy nhất. Để đảm bảo tính nhất quán và toàn vẹn của dữ liệu, nếu một trong các thao tác trong giao dịch không thành công, IndexedDB sẽ khôi phục tất cả các thao tác đó.

Để thêm dữ liệu vào cơ sở dữ liệu IndexedDB, bạn cần tạo một giao dịch trên kho lưu trữ đối tượng mà bạn muốn thêm dữ liệu, sau đó sử dụng thêm vào() phương thức trên giao dịch để thêm dữ liệu.

Bạn có thể tạo một giao dịch bằng cách gọi giao dịch phương pháp trên đối tượng cơ sở dữ liệu của bạn. Phương thức này có hai đối số: Tên (các) kho dữ liệu của bạn và phương thức giao dịch, có thể là chỉ đọc (mặc định) hoặc đọc viết.

Sau đó, gọi cho objectStore() trên giao dịch và chuyển tên của kho lưu trữ đối tượng mà bạn muốn thêm dữ liệu vào. Phương thức này trả về một tham chiếu đến kho lưu trữ đối tượng.

Cuối cùng, hãy gọi cho thêm vào() phương thức trên cửa hàng đối tượng và chuyển dữ liệu bạn muốn thêm vào:

 const addUserData = (userData, db) => {
  
  const transaction = db.transaction("userStore", "readwrite");
  
  const userObjectStore = transaction.objectStore("userStore");
  
  const request = userObjectStore.add(userData);
  
  request.onsuccess = function (event) {
    
  };
  
  request.onerror = function (event) {
    
  };
};
 

Chức năng này tạo một giao dịch với cửa hàng đối tượng “userStore” và đặt chế độ thành “readwrite”. Sau đó, nó lấy kho đối tượng và thêm dữ liệu người dùng với nó bằng cách sử dụng thêm vào phương pháp.

Lấy dữ liệu từ IndexedDB

Để truy xuất dữ liệu từ cơ sở dữ liệu IndexedDB, bạn cần tạo một giao dịch trên kho lưu trữ đối tượng mà bạn muốn truy xuất dữ liệu từ đó, sau đó sử dụng lấy() hoặc lấy hết() phương thức trên giao dịch để truy xuất dữ liệu tùy thuộc vào lượng dữ liệu bạn muốn truy xuất.

Các lấy() phương thức nhận một giá trị cho khóa chính của đối tượng bạn muốn truy xuất và trả về đối tượng có khóa tương ứng từ kho lưu trữ đối tượng của bạn.

Các lấy hết() phương thức trả về tất cả dữ liệu trong một kho lưu trữ đối tượng. Nó cũng lấy một ràng buộc tùy chọn làm đối số và trả về tất cả dữ liệu phù hợp từ cửa hàng.

 const getUserData = (id, db) => {
  const transaction = db.transaction("userStore", "readonly");
  const userObjectStore = transaction.objectStore("userStore");
  
  const request = userObjectStore.get(id);
  request.onsuccess = function (event) {
    console.log(request.result);
  };
  request.onerror = function (event) {
    
  };
};
 

Chức năng này tạo một giao dịch với cửa hàng đối tượng “userStore” và đặt chế độ thành “chỉ đọc”. Sau đó, nó truy xuất dữ liệu người dùng có id phù hợp từ kho lưu trữ đối tượng.

Cập nhật dữ liệu với IndexedDB

Để cập nhật dữ liệu trong IndexedDB, bạn cần tạo một giao dịch với chế độ “readwrite”. Tiếp tục bằng cách truy xuất đối tượng bạn muốn cập nhật bằng cách sử dụng lấy() phương pháp. Sau đó sửa đổi đối tượng và gọi đặt() phương thức trên kho lưu trữ đối tượng để lưu đối tượng đã cập nhật trở lại cơ sở dữ liệu.

 const updateUserData = (id, userData, db) => {
  const transaction = db.transaction("userStore", "readwrite");
  const userObjectStore = transaction.objectStore("userStore");
  
  const getRequest = userObjectStore.get(id);
  
  getRequest.onsuccess = function (event) {
    
    const user = event.target.result;
    
    user.name = userData.name;
    user.email = userData.email;
    
    const putRequest = userObjectStore.put(user);
    putRequest.onsuccess = function (event) {
      
    };
    putRequest.onerror = function (event) {
      
    };
  };
  getRequest.onerror = function (event) {
    
  };
};
 

Hàm này tạo một giao dịch để nhận và cập nhật dữ liệu của cơ sở dữ liệu của bạn.

Xóa dữ liệu khỏi IndexedDB

Để xóa dữ liệu khỏi IndexedDB, bạn cần tạo một giao dịch với chế độ “readwrite”. Sau đó gọi xóa bỏ() phương thức trên kho lưu trữ đối tượng để xóa đối tượng khỏi cơ sở dữ liệu:

 const deleteUserData = (id, db) => {
  const transaction = db.transaction("userStore", "readwrite");
  const userObjectStore = transaction.objectStore("userStore");
  
  const request = userObjectStore.delete(id);
  request.onsuccess = function (event) {
    
  };
  request.onerror = function (event) {
    
  };
};
 

Hàm này tạo một giao dịch xóa dữ liệu có id tương ứng khỏi kho lưu trữ đối tượng của bạn.

Bạn nên sử dụng IndexedDB hay localStorage?

Lựa chọn giữa IndexedDB và các cơ sở dữ liệu phía máy khách khác, chẳng hạn như localStorage, tùy thuộc vào yêu cầu của ứng dụng của bạn. Sử dụng localStorage để lưu trữ đơn giản một lượng nhỏ dữ liệu. Chọn IndexedDB cho các tập dữ liệu có cấu trúc lớn yêu cầu truy vấn và lọc.