javascript怎样操作数据库？_javascript的IndexedDB如何使用？-js教程-PHP中文网

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

夜晨

发布： 2025-12-15 20:15:07

原创

586人浏览过

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 创建对象存储。

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

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

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

查看详情

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);
}

登录后复制