indexDB.js
4.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
const DB_NAME = 'job_batch'
const DB_VERSION = 1
const OB_NAMES = {
UseKeyPath: 'job',
}
export const openindexedDB = () => {
// The call to the open() function returns an IDBOpenDBRequest object with a result (success) or error value that you handle as an event.
return new Promise((resolve, reject) => {
/**
* NOTE:
* 1. 第一次打开可能会提示用户获取 indexedDB 的权限
* 2. 浏览器隐身模式不会存在本地,只会存储在内存中
*/
const request = window.indexedDB.open(DB_NAME, DB_VERSION)
request.onerror = function (event) {
// Do something with request.errorCode!
console.log('open request failed', event)
console.error(event.target.error)
}
request.onsuccess = function (event) {
// Do something with request.result!
// console.log('open request success', event)
var db = event.target.result
db.onerror = function (e) {
console.error('Database error: ', e.target.error)
reject(e.target.error)
}
db.onclose = e => {
console.error('Database close:', e.target.error)
reject(e.target.error)
}
resolve(db)
}
request.onupgradeneeded = function (event) {
/**
* NOTE:
* 1. 创建新的 objectStore
* 2. 删除旧的不需要的 objectStore
* 3. 如果需要更新已有 objectStore 的结构,需要先删除原有的 objectStore ,然后重新创建
*/
// The IDBDatabase interface
console.log('onupgradeneeded', event)
var db = event.target.result
// Create an objectStore for this database
if(!db.objectStoreNames.contains('job')){
obUseKeypath(db)
}
/**
* NOTE:
* transaction
* 三个事件:
* 1. error
* 2. abort
* 3. complete
* 两个方法:
* 1. abort
* Rolls back all the changes to objects in the database associated with this transaction. If this transaction has been aborted or completed, then this method throws an error event.
* 2. objectStore
* Returns an IDBObjectStore object representing an object store that is part of the scope of this transaction.
*/
db.transaction.oncomplete = function (e) {
console.log('obj create success', e)
}
}
})
}
function obUseKeypath (db) {
const objectStore = db.createObjectStore(OB_NAMES.UseKeyPath, {
keyPath: 'id'
})
}
export const addData = (docs, objName) => {
if (!(docs && docs.length)) {
throw new Error('docs must be a array!')
}
return openindexedDB().then(db => {
const tx = db.transaction([objName], 'readwrite')
tx.oncomplete = e => {
console.log('tx:addData onsuccess', e)
return Promise.resolve(docs)
}
tx.onerror = e => {
e.stopPropagation()
console.error('tx:addData onerror', e.target.error)
return Promise.reject(e.target.error)
}
tx.onabort = e => {
console.warn('tx:addData abort', e.target)
return Promise.reject(e.target.error)
}
const obj = tx.objectStore(objName)
docs.forEach(doc => {
const req = obj.add(doc)
/**
* NOTE:
* request
* 两个事件:
* 1. success
* 2. error
*/
// req.onsuccess = e => console.log('obj:addData onsuccess', e.target)
req.onerror = e => {
console.error('obj:addData onerror', e.target.error)
}
})
})
}
//获取indexDB所有数据
export const getAllByCursor = (objName, cb) => {
return openindexedDB().then(db => {
const arr = []
const tx = db.transaction([objName])
const obj = tx.objectStore(objName)
return new Promise(resolve => {
obj.openCursor().onsuccess = e => {
const cursor = e.target.result
if (cursor) {
arr.push(cursor.value)
cb && cb(cursor)
cursor.continue()
} else {
return resolve(arr)
}
}
})
})
}
//删除indexDB所有数据
export const delAllByCursor = (objName) => {
return openindexedDB().then(db=>{
const tx = db.transaction([objName],'readwrite')
const obj = tx.objectStore(objName)
obj.clear()
})
}
//删除indexDB删除某一条数据数据
export const delOne = (objName,val) => {
return openindexedDB().then(db=>{
const tx = db.transaction([objName],'readwrite')
const obj = tx.objectStore(objName)
obj.delete(val)
})
}