当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript操作数据库：IndexedDB入门教程

JavaScript操作数据库：IndexedDB入门教程

2026-01-05 20:02:40 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JavaScript如何操作数据库？ IndexedDB使用教程》，涉及到，有需要的可以收藏一下

IndexedDB 是浏览器内置的异步、事务型客户端数据库，通过对象存储组织数据，支持索引、多种数据类型及版本控制；需用 open() 初始化并处理 onupgradeneeded 创建存储，所有增删改查操作必须在事务中进行。

javascript怎样操作数据库？_javascript的IndexedDB如何使用？

JavaScript 本身不能直接操作服务端数据库（比如 MySQL、PostgreSQL），它运行在浏览器中，没有权限直连服务器数据库。但浏览器提供了 IndexedDB —— 一个内置的、异步的、支持事务的客户端数据库，适合存储大量结构化数据（如对象、文件、二进制数据）。

IndexedDB 是什么？

IndexedDB 是一种低级 API，不是 SQL 数据库，不支持 SQL 查询语句，而是通过对象存储（Object Store）来组织数据。它支持索引、事务、键值对存取，适合离线应用、缓存、大表单暂存等场景。

关键特点：

异步操作，不会阻塞主线程
支持事务（readwrite、readonly）保障数据一致性
可存储 JS 对象、ArrayBuffer、Blob、File 等原生类型
有版本控制机制，升级数据库结构需用 onupgradeneeded

如何打开并初始化 IndexedDB？

使用 window.indexedDB.open() 打开数据库，首次打开会触发 onupgradeneeded 创建对象存储。

示例：创建名为 myAppDB、版本为 1 的数据库，并添加一个叫 users 的对象存储：

const request = indexedDB.open('myAppDB', 1);

request.onerror = () => console.error('打开失败', request.error);
request.onsuccess = () => {
  const db = request.result;
  console.log('数据库已就绪', db);
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建对象存储（类似一张表），主键为 'id'
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    // 可选：为 name 字段建立索引，方便按姓名查询
    store.createIndex('byName', 'name', { unique: false });
  }
};

怎样增删改查数据？

所有操作必须在事务中进行。先获取事务和对象存储，再调用对应方法。

假设已拿到 db 实例：

添加数据：add()（主键冲突会报错）或 put()（覆盖同主键）
读取单条：get(id)
按索引查询：index.get(value) 或 index.getAll()
遍历全部：openCursor()
删除：delete(id)

示例：添加一个用户

function addUser(db, user) {
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  const req = store.put(user); // user 必须含 id 字段（因 keyPath 是 'id'）

  req.onsuccess = () => console.log('用户已保存');
  req.onerror = () => console.error('保存失败', req.error);
}