在现代的 Web 应用开发中， PWA 技术已经成为了一个非常重要的概念。PWA 技术是利用 Web 技术来构建类似原生应用的 Web 应用，具有离线访问、推送通知、桌面图标等特性。而其中，离线访问是一个非常重要的特性，使得用户可以在弱网环境中仍然能够使用应用。
在 PWA 中，IndexedDB 是一个非常重要的离线存储技术。IndexedDB 是一个基于键值对存储的数据库，适合用于存储非关系型数据。在离线情况下，使用 IndexedDB 可以帮助我们缓存数据、图片等资源，保证应用仍能正常使用。
IndexedDB 的基本概念
在了解 PWA 中如何使用 IndexedDB 之前，我们需要先了解一些 IndexedDB 的基本概念。
- Database：IndexedDB 存储数据的数据库对象。
- Object Store：类似于关系型数据库中的表，存储 IndexedDB 存储的数据集。
- Transaction：对 Object Store 的操作需要放在 Transaction 中执行。
- Key/path：IndexedDB 中存储的数据都是键值对，其中键可以是字符串、数字等基本类型，值可以是任意 JS 对象。
- Index：用于通过非键值方式搜索 Object Store 的索引。
使用 IndexedDB 存储数据
下面，我们来看一下如何使用 IndexedDB 存储数据。
打开数据库
在使用 IndexedDB 前，我们需要先打开数据库。可以使用下面的代码：
// www.javascriptcn.com code example
let request = indexedDB.open('example', 1);
request.onupgradeneeded = function(event) {
let db = event.target.result;
if (!db.objectStoreNames.contains('data')) {
db.createObjectStore('data', {keyPath: 'id'});
}
};
request.onsuccess = function(event) {
let db = event.target.result;
// Do something with db
};
request.onerror = function(event) {
console.error('Database error:', event.target.error);
};上面的代码中新建了一个名为 example 版本为 1 的数据库。当打开数据库时，如果数据库不存在或版本号比现有的高，则会触发 onupgradeneeded 事件，在该事件的回调函数中可以新建 Object Store，设置索引等操作。
当打开成功后，会触发 onsuccess 事件，我们可以在该事件的回调函数中获取到数据库对象进行操作。如果打开失败，则会触发 onerror 事件。
操作数据
在打开数据库后，我们可以使用下面的代码来操作数据：
// www.javascriptcn.com code example
let tx = db.transaction(['data'], 'readwrite');
let store = tx.objectStore('data');
store.add({id: 1, name: 'Tom', age: 20});
store.put({id: 1, name: 'Jerry', age: 21});
let request = store.get(1);
request.onsuccess = function(event) {
let data = event.target.result;
console.log('Data:', data);
};
request.onerror = function(event) {
console.error('Get data error:', event.target.error);
};上面的代码中，首先使用 transaction() 方法开启一个事务，之后获取到相应的 Object Store 对象进行操作。add() 方法用于添加数据，put() 方法用于更新数据，get() 方法用于获取数据。
索引数据
在 IndexedDB 中，我们可以通过索引来快速搜索数据，可以使用下面的代码来创建索引：
let store = db.createObjectStore('data', {keyPath: 'id'});
store.createIndex('name', 'name', {unique: false});
store.createIndex('age', 'age', {unique: false});上面的代码中，createIndex() 方法用于创建索引，第一个参数是索引名称，第二个参数是要索引的属性，第三个参数是一些可选的配置项。在创建索引后，我们可以使用下面的代码来搜索数据：
// www.javascriptcn.com code example
let tx = db.transaction('data', 'readonly');
let store = tx.objectStore('data');
let index = store.index('name');
let request = index.getAll('Tom');
request.onsuccess = function(event) {
let data = event.target.result;
console.log('Data:', data);
};
request.onerror = function(event) {
console.error('Get data error:', event.target.error);
};上面的代码中，使用 index() 方法获取到相应的索引，之后使用 getAll() 方法搜索数据。
小结
以上是关于 PWA 技术中如何利用 IndexedDB 存储数据的介绍。IndexedDB 可以帮助我们在离线情况下缓存数据，保证应用仍能正常使用。在使用 IndexedDB 前，我们需要先打开数据库，之后可以操作数据、创建索引等操作，最后可以通过索引来搜索数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d01229e46428fe9ec9e32d