前端数据库 IndexedDB 详解：构建强大的离线Web应用

const request = indexedDB.open("MyDatabase", 1);request.onupgradeneeded = function(event) {  const db = event.target.result;  // 创建对象仓库  const store = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });  // 创建索引  store.createIndex("name", "name", { unique: false });};request.onsuccess = function(event) {  const db = event.target.result;  console.log("数据库打开成功");};request.onerror = function(event) {  console.error("数据库打开失败:", event.target.errorCode);};php490 Bytes© 菜鸟-创作你的创作

const transaction = db.transaction("users", "readwrite");const store = transaction.objectStore("users");store.add({ name: "Alice", age: 25 });php144 Bytes© 菜鸟-创作你的创作

const request = store.get(1); // 根据主键查询request.onsuccess = function(event) {  console.log(request.result);};php111 Bytes© 菜鸟-创作你的创作

const request = store.put({ id: 1, name: "Alice", age: 26 });php61 Bytes© 菜鸟-创作你的创作

store.delete(1); // 删除主键为 1 的数据php31 Bytes© 菜鸟-创作你的创作

store.openCursor().onsuccess = function(event) {  const cursor = event.target.result;  if(cursor) {    console.log(cursor.value);    cursor.continue();  }};php162 Bytes© 菜鸟-创作你的创作

transaction.onerror = function(event) {  console.error("事务失败:", event.target.error);};php88 Bytes© 菜鸟-创作你的创作

// 存储图片const imgTransaction = db.transaction("images", "readwrite");const imgStore = imgTransaction.objectStore("images");imgStore.add({ id: 1, data: blob });php161 Bytes© 菜鸟-创作你的创作