(十二)本地儲存及同步

為了使離線時也可以編輯及瀏覽文章，需要增加本地資料儲存功能，線上時聯網同步文章資料。 這裡使用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來判斷是否聯網，在連網時通過介面拉取資料，然後進行同步。

同步規則

同步有兩種情況：本地向線上同步，線上向本地同步。

獲取線上與本地資料最新資料時間戳，進行比較； 如果線上比本地資料新，線上資料同步到本地； 反之，本地資料同步到線上，相同就無需同步。