各位同学，早上好！今天咱们来聊聊IndexedDB，一个听起来有点学术，但实际上在前端世界里非常实用的家伙。咱们争取用最轻松的方式，把它给彻底搞明白。
IndexedDB，你可以把它想象成浏览器自带的一个小数据库，专门用来干离线存储的活儿。有了它，咱们的Web应用就能在没网的时候也能继续工作，甚至可以实现一些复杂的本地数据处理。
今天咱们主要讲三个方面：事务模型、版本管理和异步操作，最后再聊聊它在离线数据存储中的高级应用。
一、事务模型：保证数据一致性的基石
首先，咱们来说说事务模型。这玩意儿听起来高大上，但其实很简单。你可以把它想象成银行转账。转账需要两个步骤：A账户扣钱，B账户加钱。如果A账户扣钱成功了，B账户加钱失败了，那这笔转账就必须回滚，也就是说A账户的钱要退回去，保证数据的一致性。
IndexedDB的事务也是一样的。它是一系列数据库操作的集合，要么全部成功，要么全部失败。这样就能保证数据的完整性和一致性，防止出现数据损坏的情况。
1. 事务的创建
在IndexedDB中，我们需要先创建一个事务才能进行数据库操作。创建事务的方法是db.transaction()。
const transaction = db.transaction(['myObjectStore'], 'readwrite');db：数据库对象。['myObjectStore']：需要访问的对象仓库（Object Store）的名称数组。可以指定多个对象仓库，表示这个事务可以同时操作这些对象仓库。'readwrite'：事务的模式。可以是'readonly'（只读）或'readwrite'（读写）。
2. 事务的模式
事务模式决定了事务对数据库的访问权限。
'readonly'：只读模式。事务只能读取数据，不能修改数据。这种模式效率更高，因为它不需要加锁，可以并发执行。'readwrite'：读写模式。事务可以读取和修改数据。这种模式需要加锁，保证数据的一致性，但效率相对较低。
3. 事务的事件
事务有三个重要的事件：
complete：事务成功完成时触发。error：事务发生错误时触发。abort：事务被中止时触发。
我们可以监听这些事件，来处理事务的结果。
transaction.oncomplete = (event) => {
console.log('Transaction completed');
};
transaction.onerror = (event) => {
console.error('Transaction failed', event);
};
transaction.onabort = (event) => {
console.log('Transaction aborted');
};4. 事务的使用示例
下面是一个完整的事务使用示例：
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const addRequest = objectStore.add({ id: 1, name: 'Alice' });
addRequest.onsuccess = (event) => {
console.log('Data added successfully');
};
addRequest.onerror = (event) => {
console.error('Failed to add data', event);
};
transaction.oncomplete = (event) => {
console.log('Transaction completed');
};
transaction.onerror = (event) => {
console.error('Transaction failed', event);
};
};在这个例子中，我们创建了一个读写事务，然后向myObjectStore对象仓库中添加了一条数据。如果添加成功，控制台会打印Data added successfully和Transaction completed。如果添加失败，控制台会打印相应的错误信息。
二、版本管理：数据库升级的利器
接下来，咱们聊聊版本管理。IndexedDB 数据库是有版本的。如果你的应用需要修改数据库结构，比如新增一个对象仓库，或者修改索引，就需要升级数据库的版本。
1. 版本号
版本号是一个整数，每次升级数据库结构时，都需要增加版本号。浏览器会根据版本号来判断是否需要执行升级操作。
2. onupgradeneeded事件
onupgradeneeded事件在以下情况下触发：
- 数据库不存在时。
- 数据库的版本号低于代码中指定的版本号时。
在这个事件处理函数中，我们可以执行数据库升级操作，比如创建对象仓库、创建索引等。
3. 升级示例
下面是一个升级数据库的示例：
const request = indexedDB.open('myDatabase', 2); // 版本号设置为2
request.onupgradeneeded = (event) => {
const db = event.target.result;
const oldVersion = event.oldVersion;
const newVersion = event.newVersion;
console.log(`Upgrading from version ${oldVersion} to ${newVersion}`);
if (oldVersion < 1) {
// 如果是第一次创建数据库，创建myObjectStore对象仓库
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false }); // 创建索引
console.log('Created myObjectStore object store');
}
if (oldVersion < 2) {
// 如果是从版本1升级到版本2，创建另一个对象仓库anotherObjectStore
db.createObjectStore('anotherObjectStore', { autoIncrement: true });
console.log('Created anotherObjectStore object store');
}
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log('Database opened successfully');
};在这个例子中，我们把数据库的版本号设置为2。如果数据库不存在，或者版本号低于2，onupgradeneeded事件就会触发。
在onupgradeneeded事件处理函数中，我们首先判断当前数据库的版本号，然后根据版本号执行相应的升级操作。
- 如果版本号小于1，说明是第一次创建数据库，我们创建
myObjectStore对象仓库，并创建一个索引。 - 如果版本号小于2，说明是从版本1升级到版本2，我们创建
anotherObjectStore对象仓库。
4. 版本管理的注意事项
- 每次升级数据库结构时，一定要增加版本号。
- 在
onupgradeneeded事件处理函数中，要判断当前数据库的版本号，然后根据版本号执行相应的升级操作。 - 升级操作要具有幂等性，也就是说，多次执行相同的升级操作，结果应该是一样的。
- 升级操作可能会失败，所以要做好错误处理。
三、异步操作：非阻塞UI的保证
IndexedDB的所有操作都是异步的。这意味着，当我们发起一个数据库操作时，不会阻塞UI线程，用户仍然可以继续与应用交互。
1. 请求对象
IndexedDB使用请求对象（Request）来处理异步操作。当我们发起一个数据库操作时，会返回一个请求对象。我们可以监听请求对象的onsuccess和onerror事件，来处理操作的结果。
2. onsuccess事件
onsuccess事件在操作成功完成时触发。事件对象包含操作的结果。
3. onerror事件
onerror事件在操作失败时触发。事件对象包含错误信息。
4. 异步操作的示例
下面是一个异步操作的示例：
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const getRequest = objectStore.get(1); // 异步获取数据
getRequest.onsuccess = (event) => {
const data = event.target.result;
console.log('Data retrieved successfully', data);
};
getRequest.onerror = (event) => {
console.error('Failed to retrieve data', event);
};
};在这个例子中，我们使用objectStore.get(1)方法异步获取id为1的数据。get()方法返回一个请求对象。我们监听请求对象的onsuccess事件，当数据获取成功时，控制台会打印Data retrieved successfully和数据内容。如果获取失败，控制台会打印相应的错误信息。
5. 使用Promise简化异步操作
为了更方便地处理异步操作，我们可以使用Promise。下面是一个使用Promise的示例：
function getData(db, id) {
return new Promise((resolve, reject) => {
const transaction = db.transaction(['myObjectStore'], 'readonly');
const objectStore = transaction.objectStore('myObjectStore');
const getRequest = objectStore.get(id);
getRequest.onsuccess = (event) => {
resolve(event.target.result);
};
getRequest.onerror = (event) => {
reject(event.target.error);
};
});
}
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
getData(db, 1)
.then((data) => {
console.log('Data retrieved successfully', data);
})
.catch((error) => {
console.error('Failed to retrieve data', error);
});
};在这个例子中，我们定义了一个getData函数，它返回一个Promise。Promise会在数据获取成功时resolve，在数据获取失败时reject。
这样我们就可以使用then和catch方法来处理异步操作的结果，使代码更加简洁易懂。
四、高级应用：离线数据存储的无限可能
好了，了解了事务模型、版本管理和异步操作之后，我们就可以开始探索IndexedDB在离线数据存储中的高级应用了。
1. 离线应用缓存
最常见的应用场景就是离线应用缓存。我们可以把应用的静态资源（HTML、CSS、JavaScript、图片等）和动态数据（用户数据、文章内容等）存储到IndexedDB中。这样，即使在没有网络连接的情况下，用户仍然可以访问应用，并查看之前缓存的数据。
2. 离线编辑
IndexedDB还可以用于实现离线编辑功能。比如，一个在线文档编辑器，用户可以在没有网络连接的情况下编辑文档，并将修改后的文档存储到IndexedDB中。当网络连接恢复时，应用可以将本地修改同步到服务器。
3. 本地数据分析
IndexedDB还可以用于存储大量的本地数据，并进行本地数据分析。比如，一个游戏应用，可以把用户的游戏数据（得分、等级、装备等）存储到IndexedDB中，然后进行本地数据分析，为用户提供个性化的游戏体验。
4. PWA (Progressive Web App) 的基石
PWA 的核心思想之一就是离线可用性。IndexedDB 经常与 Service Worker 配合使用，Service Worker 负责拦截网络请求，如果网络不可用，就从 IndexedDB 中读取缓存的数据。
5. 配合 Service Worker 实现高级离线功能
| 功能 | 描述 | 代码示例 (简化) |
| ——– | ———————————————————————————————— | ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————: #service-worker.js
self.addEventListener(‘fetch’, (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request).then((response) => {
return caches.open(‘my-cache’).then((cache) => {
cache.put(event.request, response.clone()); // 重要：缓存动态内容
return response;
});
});
})
);
});
// 前端代码
function saveToIndexedDB(data) {
return new Promise((resolve, reject) => {
const dbReq = indexedDB.open(‘myDB’, 1);
dbReq.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('myObjectStore', { keyPath: 'id' });
};
dbReq.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const addReq = objectStore.add(data);
addReq.onsuccess = () => resolve();
addReq.onerror = () => reject(addReq.error);
};});
}
// 使用示例
saveToIndexedDB({id: 1, name: ‘Offline Data’}).then(() => console.log(‘Saved!’));
这些只是 IndexedDB 的一些高级应用场景，实际上它的潜力远不止于此。只要你发挥想象力，就能利用 IndexedDB 实现各种各样的离线数据存储功能。
**总结**
好了，今天咱们就聊到这里。希望通过今天的讲解，大家对 IndexedDB 的事务模型、版本管理和异步操作有了更深入的了解。记住，IndexedDB 是一个强大的工具，可以帮助我们构建更加健壮、更加用户友好的Web应用。
最后，记住，学编程就像挖金矿，挖得越深，收获越大。祝大家挖矿愉快！下次再见！