Tìm hiểu về IndexedDB

1. IndexedDB là gì

IndexedDB là một cơ chế lưu trữ phía khách hàng cho phép các ứng dụng web lưu trữ và truy xuất dữ liệu trong trình duyệt của người dùng. Đây là một cơ sở dữ liệu NoSQL có thể lưu trữ các đối tượng JSON và cung cấp một API để tương tác với dữ liệu đó.

Với IndexedDB, các ứng dụng web có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng, khiến cho nó có sẵn ngay cả khi người dùng không kết nối mạng hoặc kết nối mạng bị giới hạn. Điều này làm cho IndexedDB trở thành một công cụ mạnh mẽ để xây dựng các ứng dụng web có khả năng hoạt động ngoại tuyến.

IndexedDB sử dụng hệ thống dựa trên chỉ mục để truy xuất dữ liệu, cho phép truy vấn nhanh các tập dữ liệu lớn. Nó cũng hỗ trợ các giao dịch, cho phép thực hiện nhiều thao tác một cách nguyên tử.

IndexedDB được hỗ trợ bởi tất cả các trình duyệt web hiện đại, bao gồm Chrome, Firefox, Safari và Edge, và là một phần của API Lưu trữ Web cùng với localStorage và sessionStorage.

2. Sử dụng IndexedDB như thế nào?

Để sử dụng IndexedDB, trước tiên bạn cần tạo một cơ sở dữ liệu IndexedDB mới. Bạn có thể làm điều này bằng cách sử dụng phương thức open() của đối tượng indexedDB trong JavaScript.

Dưới đây là một ví dụ về cách tạo một cơ sở dữ liệu IndexedDB và một bảng trong đó:

let db;
let request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("Unable to open database");
};

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

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("myTable", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};

Trong đoạn mã trên, chúng ta đang tạo một cơ sở dữ liệu có tên là “myDatabase” và một bảng có tên là “myTable”. Bảng này có một trường ID và một trường tên, và chúng ta đang tạo một chỉ mục cho trường tên.

Sau khi bạn đã tạo cơ sở dữ liệu và bảng của mình, bạn có thể thêm, xóa hoặc truy vấn dữ liệu bằng cách sử dụng các phương thức của đối tượng transaction và object store trong IndexedDB.

Dưới đây là một ví dụ về cách thêm dữ liệu vào bảng của chúng ta:

let transaction = db.transaction(["myTable"], "readwrite");
let objectStore = transaction.objectStore("myTable");

let item = {
  id: 1,
  name: "John Doe",
  age: 30
};

let request = objectStore.add(item);

request.onsuccess = function(event) {
  console.log("Item added to database");
};

request.onerror = function(event) {
  console.log("Unable to add item to database");
};

Trong đoạn mã trên, chúng ta đang mở một transaction để truy cập vào bảng “myTable”, sau đó thêm một đối tượng vào đó. Nếu thao tác thành công, chúng ta sẽ nhận được một thông báo trên console. Nếu không, chúng ta sẽ nhận được một thông báo lỗi.

Bạn có thể sử dụng các phương thức khác của IndexedDB để truy vấn và thao tác dữ liệu theo cách tương tự.