Understanding IndexedDB: Concepts, API Overview, and Quick Start Guide

IndexedDB is a non‑relational client‑side database supported by modern browsers, allowing large data storage, indexing and query capabilities beyond cookies or localStorage.

The main API objects include IDBDatabase, IDBObjectStore, IDBIndex, IDBTransaction, IDBRequest, IDBCursor and IDBKeyRange, with concepts such as databases, object stores (similar to tables), records, primary keys, indexes and transactions.

A quick practical example demonstrates checking browser support, opening a database, creating an object store with a primary key, adding indexes, and performing CRUD operations (add, get, put, delete) using transactions.

if('indexedDB' in window){
  console.log('当前浏览器支持 IndexedDB');
  return;
} else {
  console.log('您的浏览器不支持 IndexedDB');
  // todo 建议升级或者更换其他浏览器
}

// 数据库实例
let db;
// 数据库打开操作，第一个参数是数据库名称, 第二个参数是数据库版本
let DBRequestLink = window.indexedDB.open('dataBaseName', 1);
DBRequestLink.onsuccess = function(event) {
  // 获取数据库实例
  db = DBRequestLink.result;
  // 其他操作
};
// 这个监听回调触发于数据库首次新建、open数据库时传递新版本(只能比之前传递的版本高)
DBRequestLink.onupgradeneeded = function(event) {};

DBOpenRequest.onupgradeneeded = function(event) {
  let db = event.target.result;
  // 创建一个数据库存储对象，并指定主键
  let objectStore = db.createObjectStore('person', {
    keyPath: 'id',
    autoIncrement: true
  });
  // 定义索引
  objectStore.createIndex('id', 'id', { unique: true });
  objectStore.createIndex('name', 'name');
  objectStore.createIndex('age', 'age');
  objectStore.createIndex('sex', 'sex');
};

// 这里的 db 就是第二步中的 db 对象，
// transaction api 的第一个参数是数据库名称，第二个参数是操作类型
let newItem = {
  id: 1,
  name: '徐嘻嘻',
  age: 3,
  sex: 'female'
};
let transaction = db.transaction('dataBaseName', "readwrite");
// 找到对应的存储对象
let objectStore = transaction.objectStore('person');
// 添加到数据对象中, 传入javascript对象
objectStore.add(newItem);

// 这里的 db 就是第二步中的 db 对象，
// 新建事务
let transaction = db.transaction('dataBaseName', "readwrite");
// 新数据主体
let newRecord = {
  id: 1,
  name: '徐嘎嘎',
  age: 5,
  sex: 'male'
};
// 打开已经存储的数据对象
let objectStore = transaction.objectStore('person');
// 获取存储的对应键的存储对象, 传入主键 id，值为 1
let objectStoreRequest = objectStore.get(1);
// 获取成功后替换当前数据
objectStoreRequest.onsuccess = function(event) {
  var record = objectStoreRequest.result;
  for (let key in newRecord) {
    if (typeof record[key] != 'undefined' || key !== 'id') {
      record[key] = newRecord[key];
    }
  }
  // 更新数据库存储数据
  objectStore.put(record);
};

// 这里的 db 就是第二步中的 db 对象，
// 新建事务
let transaction = db.transaction('dataBaseName', "readwrite");
// 打开已经存储的数据对象
let objectStore = transaction.objectStore('person');
// 获取存储的对应键的存储对象, 传入主键 id，值为 1
let objectStoreRequest = objectStore.delete(1);

To reduce boilerplate, libraries such as LocalForage and PouchDB can simplify IndexedDB usage; the article recommends LocalForage for its small size and fallback to WebSQL or LocalStorage when IndexedDB is unavailable.

The article concludes that IndexedDB is widely applicable for local storage needs in web applications, even supporting older browsers such as IE10, making it a reliable choice for many front‑end projects.