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

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

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

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

常见注意事项

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

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

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~