15-2 瀏覽器的硬碟：IndexedDB 入門

1. 開啟資料庫

const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // 建立一個叫 users 的「資料表」
  db.createObjectStore("users", { keyPath: "id" });
};

request.onsuccess = (e) => {
  console.log("資料庫連接成功");
};

2. 存取資料 (Transaction)

所有的操作都必須包在一個「事務 (Transaction)」中。

const db = request.result;
const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");

// 新增
store.add({ id: 1, name: "Andy", role: "Instructor" });

3. 2026 年的開發建議：使用 Wrapper

實務上，我們很少直接寫原生的 IndexedDB。我們會用 idb 或是 Dexie.js 這類把 API 變回 Promise 的套件。

// 如果使用了 Dexie.js
const db = new Dexie("MyDatabase");
db.version(1).stores({ users: "id, name" });
await db.users.add({ id: 1, name: "Andy" });