indexedDB

[magicdawn]

No description provided.

[magicdawn]

course

• https://javascript.info/indexeddb
• https://www.w3.org/TR/IndexedDB-2/

open database

const openRequest = indexedDB.open('db-name', 1)

openRequest.onupgradeneeded = function(e){
  // e.oldVersion 现有版本
  // indexedDB.open 里传的是期望版本
  // 在 upgradeneeded 里进行结构改造
}

openRequest.onsuccess = function() {
  const db = openRequest.result
}

openRequest.onerror = function() {
  // process error
}

object stores

就是 Table / Collection

• db.createObjectStore(name, options)
• db.deleteObjectStore(name)

必须在 onupgradeneeded listener 里操作

objectStore action

• open db
• tx = db.transcation(object-store-name, mode)
• objectStore = tx.objectStore(object-store-name)

需要通过 db.transcation(name, mode).objectStore(name) 拿到 objectStore reference

---

CURD

• C: objectStore.put(value, [key]) 如果已存在, 替换已存在
• U: objectStore.add(value, [key]) 如果已存在, 操作失败
• R: objectStore.get(key)
• D: objectStore.delete(key) / objectStore.clear()

query

1.使用 key 进行 get / delete

• objectStore.get(key)
• objectStore.getAll()
• objectStore.getAll(range: IDBKeyRange)
• objectStore.getAllKeys(range: IDBKeyRange)
• objectStore.count(key or range)

使用 IDBKeyRange.bound / lowerBound / upperBound 创建区间

2.使用其他字段进行查询

需要手动创建索引

objectStore.createIndex(indexName, keyPath, options)

使用索引

objectStore.index(indexName).get / getAll

使用索引删除

// 根据索引字段查询 key
const key = objectStore.index(indexName).getKey(valOfIndexField) 
// 根据 key 删除 object
objectStore.delete(key)

[magicdawn]

上层库

• https://github.com/jakearchibald/idb promise wrapper
• https://github.com/localForage/localForage 优先使用 indexedDB, 类 localStorage API
• level-db

level 有点复杂
https://github.com/Level/awesome

• level-js 是一个使用 indexedDB 实现 abstract-leveldown 的 levelup adapter, 已经 deprecated
• browser-level 是 level-js 的继任者
• level 是 classic-level + browser-level 的 wrapper

browser-level / level 等都是包名

---

• localForage 功能太简单了, 范围查询不支持, keys() 只能获取全部 key
• browser-level 受限于整个 level 生态

重度使用需要 indexedDB wrapper

• idb
• https://github.com/dexie/Dexie.js