IndexedDB是浏览器内置的NoSQL数据库，支持异步操作、事务处理和存储复杂数据类型，适用于离线应用与高性能本地存储。通过open()创建或打开数据库，在onupgradeneeded中定义对象仓库和索引，使用事务进行增删改查，支持主键和索引查询，并可遍历记录，结合Promise封装可简化API使用。
前端数据存储在现代Web应用中非常重要，尤其是当需要离线工作或提升性能时。IndexedDB是一种强大且灵活的浏览器内建数据库，适合存储大量结构化数据，包括文件和二进制对象（Blob）。相比localStorage，它支持索引、事务处理和异步操作，更适合复杂场景。
IndexedDB是浏览器提供的一个低层级API，用于在客户端存储大量结构化数据。它是一个NoSQL类型的数据库，数据以“对象仓库”（Object Store）的形式组织，支持通过主键或索引快速查找记录。
关键特性：
要使用IndexedDB，需经过打开数据库、创建对象仓库、执行增删改查等步骤。以下是核心流程示例：
立即学习“Java免费学习笔记（深入）”；
1. 打开或创建数据库使用window.indexedDB.open()打开数据库，若不存在则自动创建。
<font face="Courier New,Courier,monospace">const request = indexedDB.open('MyDB', 1);</font>当数据库版本变化或首次创建时触发，用于定义数据结构。
<font face="Courier New,Courier,monospace">request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
objectStore.createIndex('email', 'email', { unique: true });
}
};</font>在事务中向对象仓库添加数据。
<font face="Courier New,Courier,monospace">request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ name: 'Alice', email: 'alice@example.com' });
transaction.oncomplete = () => console.log('数据已保存');
transaction.onerror = () => console.error('事务失败');
};</font>可以通过主键或索引高效获取数据。
按主键读取<font face="Courier New,Courier,monospace">const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const getRequest = store.get(1);
getRequest.onsuccess = function() {
console.log('查到用户:', getRequest.result);
};</font><font face="Courier New,Courier,monospace">const index = store.index('email');
const emailRequest = index.get('alice@example.com');
emailRequest.onsuccess = function() {
console.log('通过邮箱查到:', emailRequest.result);
};</font><font face="Courier New,Courier,monospace">store.openCursor().onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
console.log('用户:', cursor.value);
cursor.continue();
}
};</font>更新和删除也需在事务中进行。
更新记录<font face="Courier New,Courier,monospace">store.put({ id: 1, name: 'Alice Smith', email: 'alice.smith@example.com' });</font><font face="Courier New,Courier,monospace">store.delete(1);</font>
操作完成后，记得关闭数据库连接：db.close();
基本上就这些。IndexedDB虽然API略显繁琐，但配合Promise封装或使用如idb这样的轻量库（Google推荐），可以大幅简化代码。掌握它，能让你的Web应用真正具备离线能力与高性能本地存储。
以上就是使用IndexedDB进行前端数据存储_javascript技巧的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
967
收藏
