JavaScriptIndexedDB_客户端数据库操作-js教程-PHP中文网

JavaScriptIndexedDB_客户端数据库操作

betcha

发布： 2025-11-21 21:08:02

原创

773人浏览过

IndexedDB是浏览器本地数据库，支持索引、事务和异步操作，适用于离线Web应用。通过open创建或打开数据库，onupgradeneeded中定义对象仓库和索引，如users表以id为主键并添加email唯一索引；数据增删改查均在事务中进行，add或put插入/更新记录，get根据主键读取，delete删除数据，还可通过index实现非主键字段高效查询，所有操作异步执行需监听success与error事件，从而实现前端复杂数据持久化。

javascriptindexeddb_客户端数据库操作

IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据，尤其适用于需要离线工作的 Web 应用。相比 localStorage，它支持索引、事务和异步操作，能处理更复杂的数据场景。

打开数据库并创建对象仓库

使用 IndexedDB 第一步是打开或创建数据库。如果数据库不存在，会自动创建。同时可以定义版本号来管理结构变更。

示例代码：

let db;
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建对象仓库（类似表），指定主键
  if (!db.objectStoreNames.contains('users')) {
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    // 添加索引便于查询
    objectStore.createIndex('email', 'email', { unique: true });
  }
};

request.onsuccess = function(event) {
  db = event.target.result;
  console.log('数据库打开成功');
};

request.onerror = function(event) {
  console.error('数据库打开失败:', event.target.error);
};

登录后复制

添加与读取数据

通过事务操作数据，确保一致性。写入和读取都需在事务中进行。

立即学习“Java免费学习笔记（深入）”；

添加数据示例：

function addUser(user) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.add(user);

  request.onsuccess = () => console.log('用户添加成功');
  request.onerror = (e) => console.error('添加失败:', e.target.error);
}
// 调用
addUser({ id: 1, name: '张三', email: 'zhang@example.com' });

登录后复制

读取数据示例：

千博企业网站系统全功能个人版SQL2011 Build 0903

2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态

查看详情

function getUserById(id) {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const request = store.get(id);

  request.onsuccess = function() {
    if (request.result) {
      console.log('找到用户:', request.result);
    } else {
      console.log('未找到该用户');
    }
  };
}

登录后复制

更新与删除数据

修改已有记录或移除数据也通过事务完成。

更新数据：

function updateUser(user) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.put(user); // 若主键存在则更新，否则新增
}

登录后复制

删除数据：

function deleteUser(id) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.delete(id);
}

登录后复制

查询带索引的数据

利用索引可高效查找非主键字段。

function getUserByEmail(email) {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const index = store.index('email');
  const request = index.get(email);

  request.onsuccess = () => {
    if (request.result) {
      console.log('通过邮箱找到用户:', request.result);
    }
  };
}

登录后复制

基本上就这些。掌握 open、add、get、put、delete 和索引查询，就能在前端实现较完整的数据持久化能力。注意所有操作都是异步的，合理处理 success 和 error 事件很关键。

以上就是JavaScriptIndexedDB_客户端数据库操作的详细内容，更多请关注php中文网其它相关文章！