当前位置： 首页 > article >正文

前端IndexedDB使用教程

article 2025/3/12 18:55:28

IndexedDB 是一个浏览器内置的 NoSQL 数据库，允许你在客户端存储大量结构化数据。IndexedDB 是浏览器原生支持的 API，所有现代浏览器（如 Chrome、Firefox、Edge、Safari 等）都内置了 IndexedDB，因此你不需要引入任何额外的依赖包或库，直接使用 JavaScript 即可。

👍如果觉得有帮助请帮忙点个👍

检查浏览器是否支持 IndexedDB

虽然现代浏览器都支持 IndexedDB，但为了确保兼容性，你可以在代码中添加检查：

if (!window.indexedDB) {
  console.error("Your browser doesn't support IndexedDB.");
} else {
  console.log("IndexedDB is supported!");
  // 在这里使用 IndexedDB
}

如果需要简化操作，可以使用第三方库

虽然 IndexedDB 是原生支持的，但它的 API 相对底层，使用起来可能有些繁琐。如果你希望简化操作，可以使用一些第三方库来封装 IndexedDB 的复杂性。以下是一些流行的库：

1.Dexie.js
一个轻量级的 IndexedDB 封装库，提供了更简洁的 API。
官网: Dexie.js - Minimalistic IndexedDB Wrapper

// 使用 Dexie.js 的示例
const db = new Dexie("MyDatabase");
db.version(1).stores({
  myStore: 'id, name, age'
});

db.myStore.add({ id: 1, name: 'John Doe', age: 30 });

2.localForage
一个简单的库，提供了类似 localStorage 的 API，但底层使用 IndexedDB（或其他存储后端）。
官网: localForage

// 使用 localForage 的示例
localforage.setItem('key', 'value').then(function() {
  return localforage.getItem('key');
}).then(function(value) {
  console.log(value);
});

3.IDB
一个小巧的 IndexedDB 封装库，提供了 Promise 风格的 API。
GitHub: GitHub - jakearchibald/idb: IndexedDB, but with promises

// 使用 IDB 的示例
const db = await idb.openDB('MyDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('myStore', { keyPath: 'id' });
  }
});

await db.add('myStore', { id: 1, name: 'John Doe', age: 30 });

1. 打开或创建数据库

使用 indexedDB.open() 方法打开或创建一个数据库。如果数据库不存在，它会自动创建。

// 打开或创建名为 "MyDatabase" 的数据库，版本号为 1
let request = indexedDB.open("MyDatabase", 1);

// 当数据库版本升级时触发（例如第一次创建或版本号增加）
request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // 创建一个对象存储（类似于表），名为 "myStore"，主键为 "id"
  if (!db.objectStoreNames.contains('myStore')) {
    db.createObjectStore('myStore', { keyPath: 'id' });
  }
};

// 数据库打开成功
request.onsuccess = function(event) {
  let db = event.target.result;
  console.log("Database opened successfully");

  // 在这里可以调用其他操作函数，例如添加数据、读取数据等
  addData(db);
  readData(db);
};

// 数据库打开失败
request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

2. 添加数据

使用事务向对象存储中添加数据。

function addData(db) {
  // 创建一个读写事务，操作对象存储 "myStore"
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');

  // 添加一条数据
  let request = store.add({ id: 1, name: 'John Doe', age: 30 });

  request.onsuccess = function(event) {
    console.log("Data added successfully");
  };

  request.onerror = function(event) {
    console.error("Error adding data: " + event.target.errorCode);
  };
}

3. 读取数据

通过主键从对象存储中读取数据。

function readData(db) {
  // 创建一个只读事务，操作对象存储 "myStore"
  let transaction = db.transaction(['myStore'], 'readonly');
  let store = transaction.objectStore('myStore');

  // 读取主键为 1 的数据
  let request = store.get(1);

  request.onsuccess = function(event) {
    let data = event.target.result;
    if (data) {
      console.log("Data retrieved: ", data);
    } else {
      console.log("Data not found");
    }
  };

  request.onerror = function(event) {
    console.error("Error retrieving data: " + event.target.errorCode);
  };
}

4. 更新数据

使用 put() 方法更新对象存储中的数据。如果数据不存在，则会添加新数据。

function updateData(db) {
  // 创建一个读写事务，操作对象存储 "myStore"
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');

  // 更新主键为 1 的数据
  let request = store.put({ id: 1, name: 'Jane Doe', age: 25 });

  request.onsuccess = function(event) {
    console.log("Data updated successfully");
  };

  request.onerror = function(event) {
    console.error("Error updating data: " + event.target.errorCode);
  };
}

5. 删除数据

使用 delete() 方法从对象存储中删除数据。


function deleteData(db) {
  // 创建一个读写事务，操作对象存储 "myStore"
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');

  // 删除主键为 1 的数据
  let request = store.delete(1);

  request.onsuccess = function(event) {
    console.log("Data deleted successfully");
  };

  request.onerror = function(event) {
    console.error("Error deleting data: " + event.target.errorCode);
  };
}

6. 关闭数据库

使用 db.close() 方法关闭数据库。

function closeDatabase(db) {
  db.close();
  console.log("Database closed");
}

7. 删除数据库

如果需要删除整个数据库，可以使用 indexedDB.deleteDatabase()。

function deleteDatabase() {
  let request = indexedDB.deleteDatabase("MyDatabase");

  request.onsuccess = function(event) {
    console.log("Database deleted successfully");
  };

  request.onerror = function(event) {
    console.error("Error deleting database: " + event.target.errorCode);
  };
}

完整示例

以下是一个完整的示例，展示了如何打开数据库、添加数据、读取数据、更新数据和删除数据。

// 打开或创建数据库
let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  if (!db.objectStoreNames.contains('myStore')) {
    db.createObjectStore('myStore', { keyPath: 'id' });
  }
};

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

  // 添加数据
  addData(db);

  // 读取数据
  readData(db);

  // 更新数据
  updateData(db);

  // 删除数据
  deleteData(db);

  // 关闭数据库
  closeDatabase(db);
};

request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

function addData(db) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.add({ id: 1, name: 'John Doe', age: 30 });

  request.onsuccess = function(event) {
    console.log("Data added successfully");
  };

  request.onerror = function(event) {
    console.error("Error adding data: " + event.target.errorCode);
  };
}

function readData(db) {
  let transaction = db.transaction(['myStore'], 'readonly');
  let store = transaction.objectStore('myStore');
  let request = store.get(1);

  request.onsuccess = function(event) {
    let data = event.target.result;
    if (data) {
      console.log("Data retrieved: ", data);
    } else {
      console.log("Data not found");
    }
  };

  request.onerror = function(event) {
    console.error("Error retrieving data: " + event.target.errorCode);
  };
}

function updateData(db) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.put({ id: 1, name: 'Jane Doe', age: 25 });

  request.onsuccess = function(event) {
    console.log("Data updated successfully");
  };

  request.onerror = function(event) {
    console.error("Error updating data: " + event.target.errorCode);
  };
}

function deleteData(db) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.delete(1);

  request.onsuccess = function(event) {
    console.log("Data deleted successfully");
  };

  request.onerror = function(event) {
    console.error("Error deleting data: " + event.target.errorCode);
  };
}

function closeDatabase(db) {
  db.close();
  console.log("Database closed");
}

注意事项

  1. 异步操作：IndexedDB 的所有操作都是异步的，需要使用回调函数处理结果。
  2. 事务：所有读写操作必须在事务中进行。
  3. 兼容性：IndexedDB 在现代浏览器中支持良好，但在旧版浏览器中可能不支持。
  4. 性能：IndexedDB 适合存储大量结构化数据，但对于小型数据，localStorage 可能更简单。

http://www.kler.cn/a/545471.html

相关文章：

  • AI成为基础设施有哪些研究方向：模型的性能、可解释性，算法偏见
  • 数据操作与事务：确保数据一致性的关键
  • 接口自动化框架篇：框架中的数据流转处理！
  • Mac 下使用多版本 Node
  • [RabbitMQ] RabbitMQ常见面试题
  • AI代理软件行业白皮书
  • [Spring] Spring常见面试题
  • webstorm 右下角git分支组件不显示如何恢复
  • DeepSeek解决服务器繁忙，使用API接口进行使用
  • 如何部署Deepseek-R1：从零开始的完整指南
  • 【线性代数】1行列式
  • Ansible内置模块之file
  • 实现pytorch注意力机制-one demo
  • 【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第七节】
  • [LeetCode] 二叉树 III — 110#平衡二叉树 | 257#二叉树的所有路径 | 404#左叶子之和 | 222#完全二叉树的节点个数
  • Vue.js组件开发：从入门到实践
  • 【PL/SQL】常用操作复习20250212
  • PHP防伪溯源查询系统小程序
  • 基于 Filebeat 的日志收集
  • windows 通过docker 安装mysql