IndexedDB是浏览器内置的NoSQL数据库,用于JavaScript异步存储大量结构化数据。通过indexedDB.open()创建或打开数据库,并在onupgradeneeded中定义对象仓库。数据操作需通过事务进行:使用add()添加、get()读取、put()更新、delete()删除。支持离线存储与持久化,适合高性能Web应用,但API复杂,建议封装或使用Dexie.js等库简化开发。

在JavaScript中与数据库交互,特别是在浏览器环境中,IndexedDB 是一种常用的客户端存储方案。它适合存储大量结构化数据,支持离线操作,并可在页面刷新后持久保存数据。
什么是 IndexedDB?
IndexedDB 是浏览器内置的 NoSQL 类型数据库,允许 JavaScript 异步存储和查询对象。它适用于需要本地缓存、离线功能或高性能读写的 Web 应用。
打开数据库并创建对象仓库
使用 indexedDB.open() 方法打开或创建数据库。首次运行时会触发升级操作来定义数据结构。
示例代码:
立即学习“Java免费学习笔记(深入)”;
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
// 创建一个对象仓库(类似表),主键为 id
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
};
request.onerror = function(event) {
console.error('数据库打开失败');
};
添加和读取数据
通过事务(transaction)对数据进行增删改查操作。写入和读取都需在事务中完成。
BIWEB 门户版几经周折,最终与大家见面了。BIWEB门户版建立在ArthurXF5.8.3底层上,有了更加强大的功能。 BIWEB WMS v5.8.3 (2010.1.29) 更新功能如下: 1.修正了底层getInfo方法中的调用参数,做到可以根据字段进行调用。 2.修正了栏目安装和卸载后,跳转链接的错误。 3.修正所有栏目分类系统,提交信息页面错误。 4.新增后台删除信息后仍停留原分
添加数据:
function addUser(db, user) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const addRequest = store.add(user);
addRequest.onsuccess = () => {
console.log('用户添加成功');
};
addRequest.onerror = () => {
console.error('添加失败');
};
}
读取数据:
function getUser(db, userId) {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const getRequest = store.get(userId);
getRequest.onsuccess = () => {
if (getRequest.result) {
console.log('找到用户:', getRequest.result);
} else {
console.log('未找到该用户');
}
};
}
更新和删除数据
更新数据: 使用 put() 方法,若主键已存在则覆盖。
function updateUser(db, updatedUser) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.put(updatedUser);
}
删除数据: 使用 delete() 方法。
function deleteUser(db, userId) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.delete(userId);
}
基本上就这些。IndexedDB 能力强大但 API 较复杂,建议封装常用操作或使用如 Dexie.js 这类简化库来提升开发效率。熟悉事务、对象仓库和异步流程是关键。









