indexeddb是浏览器提供的客户端存储方案，支持大量结构化数据的存储与复杂操作；2. 操作核心步骤包括：通过indexeddb.open()打开或创建数据库；在onupgradeneeded事件中创建对象仓库和索引；启动事务进行增删改查；3. 所有操作均为异步，需通过事件监听处理结果，建议使用promise封装以提升代码可读性；4. 事务具有原子性、一致性、隔离性和持久性，确保数据完整性；5. 相较于localstorage（简单键值对、同步、容量小）、web sql（已废弃），indexeddb适合存储大量结构化数据、支持索引查询和事务，是构建离线应用和pwa的理想选择。
IndexedDB是浏览器提供的一种客户端存储方案，它允许你在用户的浏览器中存储大量结构化数据。不同于简单的LocalStorage或SessionStorage，IndexedDB提供了一个完整的事务型数据库系统，这意味着你可以进行复杂的查询、索引和事务操作。通过JavaScript来操作它，本质上就是利用它提供的一系列异步API，从数据库的打开、升级，到数据的增删改查，都需要通过请求（request）和事件监听（event listeners）来处理异步结果。在我看来，理解它的异步特性和事务机制是高效使用的关键。
操作IndexedDB通常涉及以下几个核心步骤和概念：
打开或创建数据库实例： 这是所有操作的起点。你通过
indexedDB.open()
IDBOpenDBRequest
const DB_NAME = 'myAppData';
const DB_VERSION = 1; // 数据库版本号，用于控制onupgradeneeded事件
let db;
const request = indexedDB.open(DB_NAME, DB_VERSION);
request.onerror = (event) => {
console.error("数据库打开失败:", event.target.errorCode);
// 实际应用中，这里可能需要给用户一个提示
};
request.onsuccess = (event) => {
db = event.target.result;
console.log("数据库打开成功");
// 数据库实例db现在可用，可以开始进行数据操作
};处理数据库版本升级与初始化（onupgradeneeded
indexedDB.open()
onupgradeneeded
request.onupgradeneeded = (event) => {
const db = event.target.result;
console.log("数据库升级或初始化...");
// 创建一个名为 'users' 的对象仓库，keyPath指定主键
if (!db.objectStoreNames.contains('users')) {
const userStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
// 为 'users' 对象仓库创建索引，例如按 'name' 字段查找
userStore.createIndex('nameIndex', 'name', { unique: false });
console.log("对象仓库 'users' 和索引 'nameIndex' 已创建。");
}
// 也可以创建其他对象仓库，例如 'products'
if (!db.objectStoreNames.contains('products')) {
const productStore = db.createObjectStore('products', { keyPath: 'productId' });
productStore.createIndex('priceIndex', 'price', { unique: false });
console.log("对象仓库 'products' 和索引 'priceIndex' 已创建。");
}
// 如果要删除一个旧的objectStore，也可以在这里操作
// if (db.objectStoreNames.contains('oldStore')) {
// db.deleteObjectStore('oldStore');
// }
};这个事件非常关键，它确保了数据库结构在不同版本间的平滑过渡。
启动事务（Transaction）： 所有对IndexedDB数据的读写操作都必须在一个事务中进行。事务确保了操作的原子性，要么全部成功，要么全部失败。
// 假设 db 实例已经成功获取
if (db) {
const transaction = db.transaction(['users'], 'readwrite'); // 指定要操作的对象仓库和事务模式
// 'readonly' 只读模式
// 'readwrite' 读写模式
transaction.oncomplete = () => {
console.log("事务完成！");
};
transaction.onerror = (event) => {
console.error("事务失败:", event.target.error);
};
// 获取对象仓库
const userStore = transaction.objectStore('users');
// 示例：添加数据
const userData = { id: 1, name: '张三', age: 30, email: 'zhangsan@example.com' };
const addRequest = userStore.add(userData); // add用于添加新数据，如果key已存在会报错
addRequest.onsuccess = () => {
console.log("用户张三添加成功！");
};
addRequest.onerror = (event) => {
console.error("添加用户失败:", event.target.error);
};
// 示例：更新数据（put用于添加或更新）
const updatedUserData = { id: 1, name: '张三丰', age: 100, email: 'zhangsanfeng@example.com' };
const putRequest = userStore.put(updatedUserData);
putRequest.onsuccess = () => {
console.log("用户张三更新成功！");
};
// 示例：获取数据
const getRequest = userStore.get(1); // 通过主键获取
getRequest.onsuccess = (event) => {
console.log("获取用户:", event.target.result);
};
// 示例：删除数据
const deleteRequest = userStore.delete(1); // 通过主键删除
deleteRequest.onsuccess = () => {
console.log("用户1删除成功！");
};
// 示例：使用索引查询
const nameIndex = userStore.index('nameIndex');
const getByNameRequest = nameIndex.get('张三丰');
getByNameRequest.onsuccess = (event) => {
console.log("通过索引获取用户:", event.target.result);
};
// 示例：遍历所有数据（游标）
const cursorRequest = userStore.openCursor();
cursorRequest.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
console.log("游标数据:", cursor.value);
cursor.continue(); // 继续遍历下一条
} else {
console.log("所有数据遍历完毕。");
}
};
} else {
console.warn("数据库实例尚未准备好。");
}我个人觉得，IndexedDB的事务机制是它强大但有时也令人感到“麻烦”的地方，因为每一步操作都得在事务里，并且是异步的。但这正是它能保证数据完整性的核心。
IndexedDB的所有操作都是异步的，并且基于事件回调。这意味着你不能像操作普通变量那样立即得到结果，而是需要等待
onsuccess
onerror
为了更好地管理异步操作，我通常会考虑以下几种策略：
Promise化封装： 将IndexedDB的每个异步请求（如
open
add
get
async/await
例如，一个简单的Promise封装
openDB
function openDB(dbName, version) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName, version);
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 在这里处理对象仓库和索引的创建/升级
if (!db.objectStoreNames.contains('myStore')) {
db.createObjectStore('myStore', { keyPath: 'id' });
}
console.log(`数据库 ${dbName} 版本 ${version} 升级/初始化.`);
};
request.onsuccess = (event) => {
resolve(event.target.result);
};
request.onerror = (event) => {
reject(event.target.error);
};
});
}
// 使用 async/await
async function initAndUseDB() {
try {
const myDb = await openDB('myAppDB', 2);
console.log("数据库已打开:", myDb);
// 示例：添加数据
const transaction = myDb.transaction(['myStore'], 'readwrite');
const store = transaction.objectStore('myStore');
const addRequest = store.add({ id: 'item1', value: 'Hello IndexedDB' });
await new Promise((resolve, reject) => {
addRequest.onsuccess = resolve;
addRequest.onerror = reject;
});
console.log("数据添加成功！");
// 示例：获取数据
const getRequest = store.get('item1');
const result = await new Promise((resolve, reject) => {
getRequest.onsuccess = (e) => resolve(e.target.result);
getRequest.onerror = reject;
});
console.log("获取到的数据:", result);
// 事务完成后，db实例依然可用
// myDb.close(); // 适当时候关闭数据库连接
} catch (error) {
console.error("操作失败:", error);
}
}
initAndUseDB();这种方式虽然增加了初始的封装工作，但从长远来看，它让代码逻辑变得更加清晰，特别是当涉及到多个连续的数据库操作时。我发现，一旦有了这些Promise封装的基础函数，后续的业务逻辑开发会变得非常顺畅。
细致的错误处理： 每个
IDBRequest
onerror
IDBTransaction
onerror
request.onerror
transaction.onerror
addRequest.onerror
getRequest.onerror
错误对象
event.target.error
ConstraintError
NotFoundError
考虑浏览器兼容性： 虽然现代浏览器对IndexedDB的支持已经很好了，但在一些老旧或特定环境下，仍然可能遇到兼容性问题。通常会检查
window.indexedDB
if (!window.indexedDB) {
console.warn("当前浏览器不支持IndexedDB。");
// 提供备用方案，例如使用LocalStorage或提示用户升级浏览器
}我通常会把这个检查放在应用启动的早期，避免后续不必要的错误。
事务是IndexedDB的灵魂，也是它区别于LocalStorage等简单存储机制的核心优势。理解事务的重要性，就好比理解银行转账为什么需要确保“要么转账成功，要么账户余额不变”一样，它关乎数据的完整性和一致性。
如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld
0
原子性（Atomicity）： 一个事务中的所有操作被视为一个不可分割的单元。这意味着，事务中的所有操作要么全部成功并提交（commit），要么全部失败并回滚（rollback）。不会出现部分操作成功、部分操作失败的情况。比如，你有一个操作既要删除一条旧数据，又要插入一条新数据，如果这两个操作在一个事务中，即使插入新数据时因为某些原因失败了，旧数据也不会被删除，保证了数据不会处于一个中间的、不确定的状态。
一致性（Consistency）： 事务的执行会使数据库从一个一致状态转换到另一个一致状态。在事务开始时，数据库处于一个有效状态；在事务结束时，无论提交还是回滚，数据库都会回到一个有效状态。这防止了无效数据或不完整的数据被写入数据库。
隔离性（Isolation）： 并发执行的多个事务之间是相互隔离的，一个事务的中间状态不会被其他事务看到。这意味着，即使有多个操作同时尝试修改相同的数据，它们也像是串行执行一样，避免了数据冲突和脏读。IndexedDB的事务是短期的，并且一旦启动就不能添加新的操作。这有助于简化隔离的实现。
持久性（Durability）： 一旦事务成功提交，它对数据库的修改就是永久性的，即使系统崩溃或浏览器关闭，数据也不会丢失。这是IndexedDB作为持久化存储的关键特性。
为什么必须使用事务？
想象一下，你正在构建一个离线笔记应用。用户编辑了一篇笔记，你需要：
如果这些操作不放在一个事务里，万一在更新笔记内容后，更新修改时间的操作失败了，你的数据就处于一个不一致的状态：内容是新的，但修改时间却是旧的。这显然是不可接受的。
将这些操作封装在一个
readwrite
我通常会把一个业务逻辑单元内所有相关的数据库操作都放在同一个事务中，这样能最大限度地保证数据的完整性。虽然这意味着你可能需要频繁地创建事务，但这是IndexedDB设计哲学的一部分，也是其强大之处。
在前端的持久化存储领域，我们有很多选择，每种都有其适用场景和局限性。理解它们之间的差异，能帮助我们做出更明智的技术选型。
LocalStorage 和 SessionStorage：
setItem(key, value)
getItem(key)
JSON.stringify()
JSON.parse()
Cookie：
Web SQL Database (已废弃)：
IndexedDB：
ArrayBuffer
Blob
总结来说，如果你只是想存个用户名或者少量配置，LocalStorage就够了。但如果你在构建一个功能复杂的离线应用，或者需要处理大量数据，并且对数据结构、查询效率和数据完整性有要求，那么IndexedDB几乎是唯一的、也是最好的选择。它虽然学习曲线比LocalStorage陡峭，但提供的能力是其他存储方式无法比拟的。
以上就是js如何操作indexedDB的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
881
