IndexedDB là gì? Khi nào dùng thay localStorage?

IndexedDB là cơ sở dữ liệu có transaction, chạy ngay trong browser, lưu được object có cấu trúc, file và blob.

const req = indexedDB.open('app', 1)

req.onupgradeneeded = (e) => {
  const db = e.target.result
  const store = db.createObjectStore('drafts', { keyPath: 'id' })
  store.createIndex('byUpdatedAt', 'updatedAt')     // truy vấn theo cột khác
}

req.onsuccess = (e) => {
  const db = e.target.result
  const tx = db.transaction('drafts', 'readwrite')
  tx.objectStore('drafts').put({ id: 1, title: 'Bản nháp', updatedAt: 1724200000000 })
}

So với localStorage:

Điểm hay bị bỏ qua: localStorage là đồng bộ. Ghi 2MB JSON vào đó làm đứng giao diện ngay tại dòng lệnh đó — IndexedDB thì không.

Khi nào dùng IndexedDB: ứng dụng offline-first, lưu file/ảnh phía client, cache dữ liệu lớn, hàng đợi đồng bộ khi mất mạng.

Lưu ý: API gốc của IndexedDB dựa trên sự kiện, rất dài dòng và dễ viết sai giao dịch. Trong dự án thật gần như luôn dùng lớp bọc — idb (Promise hoá, rất nhẹ) hoặc Dexie.js (API giống ORM).

Lưu ý 2: dữ liệu không được đảm bảo tồn tại vĩnh viễn — browser có thể xoá khi thiếu dung lượng. Cần giữ chắc thì gọi navigator.storage.persist().