简介
IndexedDB用来存储需要离线使用的数据，一般用来存储对象数据，例如json/blob/xml，用来在网页中展示的动态数据。它有transction功能。
使用准备
一般使用一个外部库idb实现这个功能，使用原生的API也可以，只不过使用起来稍微麻烦。具体说明在该库的文档里有。
代码组织
1. 将idb引入代码
2. 新建一个helper文件utility.js。
utility.js引入代码，复用代码，以简化后续操作。
var dbPromise = idb.open('posts-store', 1, function (db) {
if (!db.objectStoreNames.contains('posts')) {
db.createObjectStore('posts', { keyPath: 'id' });
}
});
function writeData(st, data) {
return dbPromise
.then(function (db) {
var tx = db.transaction(st, 'readwrite');
var store = tx.objectStore(st);
store.put(data);
return tx.complete;
});
}
3. 要存的数据data
注意： 如果数据库的keyPath为id，则在数据data中必须包含id字段。
data = {
"first": {
"age": 21,
"id": 1,
"name": "name"
}
}
4. 部分ServiceWorker代码
sw.js
self.addEventListener('fetch', function (event) {
// Let the browser do its default thing
// for non-GET requests.
if (event.request.method != 'GET') return;
var url = 'https://pwagram-bbfd4.firebaseio.com/posts.json';
if (event.request.url.indexOf(url) > -1) {
event.respondWith(fetch(event.request)
.then(function (res) {
var clonedRes = res.clone();
clonedRes.json()
.then(function (data) {
console.log("fetched data", data)
for (var key in data) {
writeData('posts', data[key]);
}
});
return res;
})
);
} else {
// ...
}