(十二)本地存储及同步

为了使离线时也可以编辑及浏览文章，需要增加本地数据存储功能，在线时联网同步文章数据。 这里使用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来判断是否联网，在连网时通过接口拉取数据，然后进行同步。

同步规则

同步有两种情况：本地向线上同步，线上向本地同步。

获取线上与本地数据最新数据时间戳，进行比较； 如果线上比本地数据新，线上数据同步到本地； 反之，本地数据同步到线上，相同就无需同步。

博客地址: alibt.top

更多精彩，请关注我的公众号！