为了使离线时也可以编辑及浏览文章，需要增加本地数据存储功能，在线时联网同步文章数据。 这里使用HTML5提供的新的本地存储数据库IndexedDB。
使用数据库
const DB_NAME = 'BlogDB'
const PostStore = 'post'
let BlogDB
const request = indexedDB.open(DB_NAME, 1)
request.onerror = function(event) {
alert('BlogDB error:', event.target)
}
request.onupgradeneeded = function() {
BlogDB = request.result
if (!BlogDB.objectStoreNames.contains(PostStore)) {
// 指定主键
BlogDB.createObjectStore(PostStore, { keyPath: '_id' })
}
}
request.onsuccess = function() {
BlogDB = request.result
}
使用事务
let t = BlogDB.transaction([PostStore], 'readwrite').objectStore(PostStore)
常用的增删改查
// 增加
t.add(data)
//修改
t.put(data)
// 删除
t.delete(id)
// 查找某一个
t.get(id)
// 条件筛选
let list = []
t.openCursor().onsuccess = function(event) {
let cursor = event.target.result
if (cursor) {
let v = cursor.value
let valid = fn(v,q) // 条件筛选
if (valid) {
list.push(v)
}
cursor.continue()
} else {
console.log(list) // 结果
}
}
数据同步
在线判断
通过navigator.onLine来判断是否联网，在连网时通过接口拉取数据，然后进行同步。
同步规则
同步有两种情况：本地向线上同步，线上向本地同步。
获取线上与本地数据最新数据时间戳，进行比较； 如果线上比本地数据新，线上数据同步到本地； 反之，本地数据同步到线上，相同就无需同步。
