j*ascript怎样操作数据库？_j*ascript的IndexedDB如何使用？

jascript怎样操作数据库？_jascript的IndexedDB如何使用？

发布时间：2025-12-15

点击量：

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

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

J*aScript 本身不能直接操作服务端数据库（比如 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 });
  }
};

怎样增删改查数据？

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

ShopEx助理

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

0 查看详情 ShopEx助理

假设已拿到 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);
}

常见注意事项

IndexedDB 容易踩坑，注意这些点：

所有回调（success/error）里的 this 指向请求对象，推荐用 event.target.result 或箭头函数避免 this 丢失
事务生命周期很短，必须在事件回调里完成操作，否则事务自动关闭
不能跨域访问（同源策略限制），localhost 和 127.0.0.1 被视为不同源
存储空间有限（通常几十 MB 到几百 MB，取决于浏览器和设备），不适合存超大文件
调试可用 Chrome DevTools → Application → IndexedDB 查看内容

基本上就这些。IndexedDB 不复杂但容易忽略事务和版本逻辑，写几个封装函数（如 dbPromise + async/await 包装）能大幅提升开发体验。

以上就是j*ascript怎样操作数据库？_j*ascript的IndexedDB如何使用？的详细内容，更多请关注其它相关文章！

上一篇：写完html怎么运行_写完html运行方法【教程】

下一篇：为什么J*aScript的递归函数需要小心使用_如何避免栈溢